0

Начал изучать React Native и появился вопрос. Делаю боковое меню три точки. Пробовал react-native-popup-menu, но оно тоже не закрывается, если кликать не в него.

import React, { useState } from 'react';
import { FlatList, View,} from 'react-native';
import { Title } from './Title';


export const MainScreen = () => {
  const [mainTitle, setMainTitle] = useState([
  {id: 1, title: 'test1' },
  { id: 2, title: 'test2' }
]);

  return( 
    <View style={{flex:1}}>

      <FlatList
        keyExtractor={item => item.id.toString()}
        data={mainTitle}
        onEndReachedThreshold={0.7}
        initialNumToRender={7}
        renderItem={({item})=> 
       <Title title={item.title}/>
        }
      />
    </View>
  );
};

и код Title

import React, { useState } from 'react';
import { StyleSheet, View, TouchableOpacity, Text, } from 'react-native';
import {  MaterialCommunityIcons  } from '@expo/vector-icons';
import {THEME} from '../theme';


export const Title = ({title}) => {
    
  const [target, setTarget] = useState(false);
 
  let menu;

  if(target){
    menu = (
      <View style={styles.menu} >
        <TouchableOpacity
          style = {[styles.btn]}
          onPress = {() => {  console.log('Сохранить') }} >
       <Text>Сохранить</Text>
      </TouchableOpacity>

      <TouchableOpacity
      style = {styles.btn}
      onPress = {() => { console.log('Удалить') }}
      >
        <Text>Удалить</Text>
      </TouchableOpacity>
    </View>
  )
  }else{
    menu=null
  }


  return( 
    <>
      <Text>{title}</Text>
      <TouchableOpacity
        style = {styles.button}
        onPress = {() => {
          setTarget(target? false : true)
          }
        }
      >
        <MaterialCommunityIcons name="dots-vertical" size={24} color={THEME.BLACK_COLOR}  />
      </TouchableOpacity>
      {menu}
    </>
  );
};

const styles = StyleSheet.create({
  menu:{
    alignItems: 'center',
    borderWidth: 2,
    borderColor: THEME.COLOR,
  },
    btn:{
    alignItems: 'center',
    margin: 10,
    height:'10%',
    width: '20%',
  },
    button:{
    width: '8%',
    height: '75%',
    height: 40,
    width: 40,
    marginTop:10,
  }
});

когда открыто {menu} если клик будет не на {menu}, то {menu} должно закрываться. Не могу понять как клик не на {menu} поймать .

2
  • В смысле "не закрывается, если кликать не в него"? Вы обработчик для этого сделали?
    – MrYogurt
    13 авг 2021 в 12:57
  • я не пойму как поймать клик вне элемента меню.
    – Dmitry
    13 авг 2021 в 13:31

1 ответ 1

0

Как связать дочерний компонент с родителем:

const Parent = () => {

  const handleClick = (event) => {
    console.log("Clicked", event)
  }

return (
  <>
    <Child handleClick={handleClick} /> // передаем обработчик дочернему компоненту
  </>
)
}

const Child = (handleClick) => { // принимаем пропсом функцию в дочернем компоненте

return <Button onClick={(event) => handleClick(event)} /> // вызываем родительскую функцию и передаем ей ивент
}

По вашему коду все равно непонятно, как должно работать это меню, нужно заливать приложение на codepen и кидать ссылку. Но я на основе вашего кода описал, как вообще его можно создать:

import React, { useState } from 'react';
import { StyleSheet, View, TouchableOpacity, Text, } from 'react-native';
import { MaterialCommunityIcons } from '@expo/vector-icons';
import { THEME } from '../theme';

import { FlatList, } from 'react-native';
import { Title } from './Title';


export const MainScreen = () => {
  const [mainTitle, setMainTitle] = useState([
    { id: 1, title: 'test1' },
    { id: 2, title: 'test2' }
  ]);

  return (
    <View style={{ flex: 1 }}>

      <FlatList
        keyExtractor={item => item.id.toString()}
        data={mainTitle}
        onEndReachedThreshold={0.7}
        initialNumToRender={7}
        renderItem={({ item }) =>
          <Title title={item.title} />
        }
      />
    </View>
  );
};


export const Title = ({ title }) => {

  const [target, setTarget] = useState(false);

  return (
    <>
      <Text>{title}</Text>
      <TouchableOpacity
        style={styles.button}
        onPress={() => setTarget(target ? false : true)}
      >
        <MaterialCommunityIcons name="dots-vertical" size={24} color={THEME.BLACK_COLOR} />
      </TouchableOpacity>

      {target && ( // заменил изначальный бред с записью в переменную, теперь меню будет отрисовано, когда таргет тру, так же можно использовать тернарное выражение
        <View style={{ position: "absolute", width: "100%", height: "100%" }}> // делаем общий контейнер для меню и бэкграунда на весь экран в абсолюте, чтобы наложить поверх прочих элементов
          <View style={styles.menu}> // здесь нужно прописать размерные стили для самого меню
            <TouchableOpacity
              style={[styles.btn]}
              onPress={() => console.log('Сохранить')} >
              <Text>Сохранить</Text>
            </TouchableOpacity>

            <TouchableOpacity
              style={styles.btn}
              onPress={() => console.log('Удалить')}
            >
              <Text>Удалить</Text>
            </TouchableOpacity>
          </View>
          <View style={{ width: "100%", height: "100%" }}>
            <TouchableOpacity style={{ width: "100%", height: "100%" }} onClick={() => setTarget(false)} /> // здесь растягиваем контейнер с обработчиком клика на весь экран и если все сделано правильно, контейнер будет находиться позади меню и при нажатии на пустое место за меню, будет происходить изменение стейта таргет на фолс
          </View>
        </View>
      )}
    </>
  );
};

const styles = StyleSheet.create({
  menu: {
    alignItems: 'center',
    borderWidth: 2,
    borderColor: THEME.COLOR,
  },
  btn: {
    alignItems: 'center',
    margin: 10,
    height: '10%',
    width: '20%',
  },
  button: {
    width: '8%',
    height: '75%',
    height: 40,
    width: 40,
    marginTop: 10,
  }
});
9
  • В js можно определить куда был клик вот так event.target.tagName, Как это сделать в Rеact native?
    – Dmitry
    13 авг 2021 в 14:37
  • @Dmitry законсольте ивент в обработчике или просто передавайте метки помимо ивента. Но тут встает вопрос, зачем вам это? В реальных задачах у вас не должно происходить ситуаций, когда вам потребуется именно определять где был сделан клик.
    – MrYogurt
    13 авг 2021 в 14:48
  • Я просто не могу понять, как мне определить, что клик был не на меню. Уже несколько дней с этим мучась. Ничего в голову не приходит.
    – Dmitry
    13 авг 2021 в 14:53
  • @Dmitry так выложите код, откуда мне понять как устроено ваше меню и куда вы хотите кликнуть?
    – MrYogurt
    13 авг 2021 в 14:59
  • отредактировал вопрос
    – Dmitry
    14 авг 2021 в 7:52

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.