React native 在react native中从另一个组件调用模态不会打开模态

我试图从另一个组件打开一个模态。 这在我的父组件中：

  const [modalVisible, setModalVisible] = useState(false);

<TouchableOpacity
  style={styles.gateBtn}
  onPress={() => {
    setModalVisible(true);
  }}
>
  <Text style={styles.gateBtnText}>Show Modal</Text>
  <OpenModal isModalVisible={modalVisible} />
</TouchableOpacity>

const[modalVisible，setModalVisible]=useState（false）；
{
setModalVisible（真）；
}}
>
显示模态

这是我的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;

import React，{useState}来自“React”；
进口{
样式表，
看法
文本，
警觉的，
情态动词
触控高光，
}从“反应本族语”；
函数OpenModel（道具）{
const[modalVisible，setModalVisible]=使用状态（false）；
返回(
{
警报。警报（“模式已关闭”）；
}}
>
你好，世界！
{
setModalVisible（！modalVisible）；
}}
>
隐藏模态
);
}
const styles=StyleSheet.create({
centeredView：{
弹性：1，
辩护内容：“中心”，
对齐项目：“中心”，
玛金托普：22，
},
莫达尔维：{
差额：20，
背景颜色：“白色”，
边界半径：20，
填充：35，
对齐项目：“中心”，
阴影颜色：“000”，
阴影偏移：{
宽度：0，
身高：2，
},
阴影不透明度：0.25，
阴影半径：3.84，
标高：5，
},
打开按钮：{
背景颜色：“F194FF”，
边界半径：20，
填充：10，
标高：2，
},
文本样式：{
颜色：“白色”，
fontWeight：“粗体”，
textAlign：“居中”，
},
modalText：{
marginBottom:15，
textAlign：“居中”，
},
});
导出默认OpenModel；

但是我好像做错了什么，

---

我试图通过使用

isModalVisible={modalVisible}

将

modalVisible

传递给OpenModel，

modalVisible

已定义为false，当单击按钮时，它变为true，但在我的OpenModel组件中，它似乎没有定义，并且根本没有打开模式。这里缺少什么？

您需要传入setModalVision，然后使用父组件中的props.modalVisible

父母

<OpenModal isModalVisible={modalVisible} setModalVisible={setModalVisible} />

子组件

function OpenModal(props) {
  return (
    <Modal
      animationType="slide"
      transparent={true}
      visible={props.isModalVisible}
      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={() => {
              props.setModalVisible(!props.isModalVisible);
            }}
          >
            <Text style={styles.textStyle}>Hide Modal</Text>
          </TouchableHighlight>
        </View>
      </View>
    </Modal>
  );
}

函数OpenModel（道具）{
返回(
{
警报。警报（“模式已关闭”）；
}}
>
你好，世界！
{
props.setModalVisible（！props.isModalVisible）；
}}
>
隐藏模态
);
}

我刚修正了一个输入错误。这一个模式已经打开，我无法关闭它！props.modalVisible在OpenModel组件中未定义。谢谢，它应该是props.modalVisible而不是props.isModalVisible，并且这一个有效。谢谢uoh。对了，您在将其传递到OpenModel时更改了名称。忘了吧。更新