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

Posted 2023-02-16

【中文标题】从反应原生的另一个组件调用模态不会打开模态

【英文标题】：calling modal from another component in react native wont open modal

【发布时间】：2021-03-05 16:15:54

【问题描述】：

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

  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 组件中它似乎未定义，并且它没有打开模态的。我在这里错过了什么？

【参考方案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>
  );

【讨论】：

我刚刚修正了一个错字。

这个模态已经打开了，我关不了！

props.modalVisible 在 OpenModal 组件中未定义。

谢谢，它应该代替 props.modalVisible 到 props.isModalVisible，这个工作谢谢你

哦，对了，您在将名称传递给 OpenModal 时更改了名称。忘记了。更新