我正在尝试从另一个组件打开一个模式。这是在我的父组件中:
const [modalVisible, setModalVisible] = useState(false);
<TouchableOpacity
style={styles.gateBtn}
onPress={() => {
setModalVisible(true);
}}
>
<Text style={styles.gateBtnText}>Show Modal</Text>
<OpenModal isModalVisible={modalVisible} />
</TouchableOpacity>
这是我的 OpenModal.js
import React, { useState } from "react";
import {
StyleSheet,
View,
Text,
Alert,
Modal,
TouchableHighlight,
} from "react-native";
function OpenModal(props) {
const [modalVisible, setModalVisible] = useState(false);
return (
<Modal
animationType="slide"
transparent={true}
visible={modalVisible}
onRequestClose={() => {
Alert.alert("Modal has been closed.");
}}
>
<View style={styles.centeredView}>
<View style={styles.modalView}>
<Text style={styles.modalText}>Hello World!</Text>
<TouchableHighlight
style={{ ...styles.openButton, backgroundColor: "#2196F3" }}
onPress={() => {
setModalVisible(!modalVisible);
}}
>
<Text style={styles.textStyle}>Hide Modal</Text>
</TouchableHighlight>
</View>
</View>
</Modal>
);
}
const styles = StyleSheet.create({
centeredView: {
flex: 1,
justifyContent: "center",
alignItems: "center",
marginTop: 22,
},
modalView: {
margin: 20,
backgroundColor: "white",
borderRadius: 20,
padding: 35,
alignItems: "center",
shadowColor: "#000",
shadowOffset: {
width: 0,
height: 2,
},
shadowOpacity: 0.25,
shadowRadius: 3.84,
elevation: 5,
},
openButton: {
backgroundColor: "#F194FF",
borderRadius: 20,
padding: 10,
elevation: 2,
},
textStyle: {
color: "white",
fontWeight: "bold",
textAlign: "center",
},
modalText: {
marginBottom: 15,
textAlign: "center",
},
});
export default OpenModal;
但是似乎我做错了什么,我试图modalVisible
通过使用传递给 OpenModalisModalVisible={modalVisible}
并且modalVisible
已经被定义为 false,当单击按钮时它变为 true,但是在我的 OpenModal 组件中它似乎未定义,并且它没有打开模态的。我在这里想念什么?