如何从react-native中的另一个组件打开Modal

Question

我尝试从react-native中的另一个组件打开模态，但模态未打开。所以如果有任何解决方案请帮助我。这是我的代码

modal.js

import React from './node_modules/react';
import { View, Text } from 'react-native';

const ProfileModal = () => {
    return (
            <View>
                <Text>HELLO TEXT</Text>
            </View>
    );
}

export default ProfileModal;

----------------------------------------
header.js
import ProfileModal from './ProfileModal';
import { Image, View, TouchableOpacity, Text } from 'react-native';
import Modal from 'react-native-modal';

const openLoginPopup = () => {
 return (
           <TouchableOpacity onPress={() => this.openModal}>
            <Text> Login </Text>
           </TouchableOpacity>
        )
}

const openModal = () => {
  return (
    <Modal isVisible={true}>
       <ProfileModal />
    </Modal>
  )

}

谢谢，

Answer 1

在这种情况下，react-native-modal 提供回调 onBackdropPress、onBackButtonPress 来关闭。

你可以这样使用它：

const ProfileModal = ({ open, onClose }) => {
  return (
    <Modal isVisible={open} onBackButtonPress={onClose} onBackdropPress={onClose}>
      <View>
        <Text>HELLO TEXT</Text>{' '}
      </View>
    </Modal>
  )
}

然后使用时传入onClose函数：

 <ProfileModal open={open} onClose={()=> setOpen(false)} />