关闭React Native Modal无法正常工作

debugcn 发表于 Dev

莎拉

我想在React native中有一个Modal，如下所示，其中Modal应该将onPress关闭到``关闭''文本。演示图片在这里

ModalProps来自先前的组件，为true。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;

我怎样才能做到这一点？

埃里克前田

您的父组件应具有一种状态，如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)} />
   );
}

ModalComponent;

// 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>

   );
  }

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。