关闭 React 本机模式不起作用

【问题标题】：Closing React native Modal is not working关闭 React 本机模式不起作用
【发布时间】：2021-01-28 11:16:03
【问题描述】：

我想在 React 本机中有一个模态，如下所示，模态应该关闭 onPress 到“关闭”文本。 demo picture here

ModalProps 来自前一个组件，为 true。 OnPress to 'close' 我希望 'visible' 为 false 并关闭 Modal。我的操作系统是安卓。代码如下：

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

【解决方案1】：

您的父组件应该具有类似modalVisible 的状态来处理模态可见性。所以你的父组件应该像onPressClose这样传递函数属性@

父组件：

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>

   );
  }

【讨论】：