Как показать модальные в React Native, используя функциональный компонент, импортированный из другого файла

Question

Я показываю представление «Вход». js и в этом представлении при нажатии кнопки мне нужно отобразить модально, что я разделил и записал в другой файл с именем «Страны». js.

Вкл. Логин. js файл Я импортировал Страны. js и по нажатию кнопки я делаю это:

show_modal = () => {

    <Countries/>

}

но ничего не происходит , Я новичок, я только начал React Native, пожалуйста, помогите мне.

Страны. js код:

import React, { Component, useState } from "react";
import {

Оповещение, Модальный, Текст, TouchableHighlight, View} от "Reaction-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;

Answer 1

Вам нужно иметь этот модал напрямую с другими компонентами. Пример кода

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>
  )

}

Answer 2

Измените это

show_modal = ()=> {

  <Countries/>

}

на это

show_modal = ()=> {

  return  <Countries/>; // add return keyword 

}

вышеупомянутая функция вернет неопределенное значение, если идентификатор возврата явно не определен