Закрытие React native Modal не работает

Я хочу иметь Modal in React native, как показано ниже, где Modal должен закрываться onPress до текста «закрыть». демонстрационное изображение здесь

ModalProps исходит из предыдущего компонента как истинный. OnPress, чтобы «закрыть». Я хочу, чтобы «видимый» был ложным, а модальный - закрытым. Моя ОС - Android. Код ниже:

type ModalProps = {
    visible: boolean  // visible = true here from the previous screen
}


const closeModal = ():void => {
    // code to make the visible false
}

function myModal ({visible}: ModalProps) {
    return (
        <Modal visible={visible}>
            <View>
                <Text> this is my Modal</Text> 
            </View>
            <View>
                <Text onPress={() => this.closeModal()}>Dismiss</Text>
            </View>
        </Modal>
    );
}

export default myModal;

Как я могу это сделать?


react-native react-native-android simplemodal
person Sarah    schedule 28.01.2021    source источник

Ответы (1)


arrow_upward
2
arrow_downward

Ваш родительский компонент должен иметь состояние типа modalVisible для обработки модальной видимости. Таким образом, ваш родительский компонент должен передать опору функции, например onPressClose

ParentComponent:

import React, {useState} from 'react';
import { View, Text } from 'react-native';
import Modal from 'react-native-modal';

function ParentComponent() {

  const [visible, setVisible] = useState(true); // Starts with what visibility you want.

  return (
    <MyModal visible={visible} onPressClose={() => setVisible(false)} />
   );
}

Модальный компонент:

// imports...

function MyModal ({visible, onPressClose}){
  return (
    <Modal visible={visible}>
      <View>
         <Text> this is my Modal</Text> 
      </View>
      <View>
        <Text onPress={onPressClose}> Dismiss </Text>
      </View>
    </Modal>

   );
  }
person Erick Maeda    schedule 28.01.2021