从反应原生的另一个组件调用模态不会打开模态

Question

我正在尝试从另一个组件打开模式。 这是在我的父组件中：

  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;

但是我好像做错了什么， 我正在尝试使用isModalVisible={modalVisible} 将modalVisible 传递给OpenModal，而modalVisible 已经定义为false，单击按钮时它变为true，但是在我的OpenModal 组件中它似乎未定义，并且它没有打开模态的。我在这里错过了什么？

Answer 1

你需要传入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>
  );
}