【问题标题】：How to show Modal in React Native using Functional Component imported from another file如何使用从另一个文件导入的功能组件在 React Native 中显示模态
【发布时间】：2020-07-20 22:09:15
【问题描述】：

我正在显示一个视图 Login.js，在该视图中单击按钮，我需要呈现模态，我已将其分离并写入另一个名为 Country.js 的文件中。

在 Login.js 文件上，我已经导入了 Country.js，然后单击按钮，我正在这样做：

show_modal = () => {
    <Countries/>
}

但是什么都没有发生。我是刚开始 React Native 的菜鸟，请帮助我。

Countries.js 代码：

import React, { Component, useState } from "react";
import {
Alert,
Modal,
Text,
TouchableHighlight,
View
} from "react-native";

const Countries = () => {

    console.log('called');
    
    const [modalVisible, setModalVisible] = useState(true);
    
    return (
    
    <View style={styles.centeredView}>
      <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>
    
      <TouchableHighlight
        style={styles.openButton}
        onPress={() => {
          setModalVisible(true);
        }}
      >
        <Text style={styles.textStyle}>Show Modal</Text>
      </TouchableHighlight>
    </View>)
};
    
export default Countries;

【问题讨论】：

嗨，您能否添加 Country.js 代码，以便我们了解它为什么不起作用，但乍一看，我的猜测是因为您在 Country 组件中没有任何道具，所以它不知道该怎么做。跨度>
一些我在这里没有提到的导入。
您可以为 modalVisible=true 传递道具并使用模态组件，
我在哪里使用模态组件？
你看我已经默认设置了模态的状态。瓦利德·纳西尔

标签： reactjs react-native jsx

【解决方案1】：

Login.js

import React, { Component, useState } from "react";
import {Modal, View, Text, TouchableHighlight} from 'react-native';
import CountryModal from 'path to outsource country modal file';

const login = (props)=>{
const [modalVisible, setModalVisible] = useState(true);

return(

<View>
    <TouchableHighlight
style={styles.openButton}
onPress={() => {
    setModalVisible(true);
}}
>
<Text style={styles.textStyle}>Show Modal</Text>
</TouchableHighlight>

<CountryModal isVisible={modalVisible} setModalVisiblity = {()=>{setModalVisible(preState=> preState = !preState)}}>
</View>
)
}

export default login;

国家模式文件

import React from react;
import {Modal} from 'react-native';

const Country = (props)=>{

return (
<Modal
    animationType="slide"

    transparent={true}
    visible={isVisible}
    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.setModalVisiblity
          }}
        >
          <Text style={styles.textStyle}>Hide Modal</Text>
        </TouchableHighlight>
      </View>
    </View>
  </Modal>
)
}

希望你能得到答案。

【讨论】：

【解决方案2】：

您需要将此模式直接与其他组件一起使用。示例代码

export default function Login() {

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

  return (
    <View>
      <Button title="Toggle Modal" onPress={() => setModalVisible(!modalVisible)}
      // other login page code
      <Countries visible={visible} /> // or any other modal, add direclty to the screen you need to show the modal at
    </View>
  )

}

【讨论】：

先生，我没有为国家设置任何道具。
您应该将visible 状态从模态移到父组件。因为它是父组件的状态，所以应该显示或不显示模式。所以你的模态不会包含任何状态，而是将状态逻辑转移到上层组件。

【解决方案3】：

改变这个

show_modal = ()=> {

  <Countries/>

}

到这个

show_modal = ()=> {

  return  <Countries/>; // add return keyword 

}

如果返回 id 没有明确定义，上述函数将返回 undefined

【讨论】：

你能在你的应用中试一试然后回答吗？
你在哪里调用这个函数show_modal？在反应原生
在 Login.js 文件中