Как открыть Modal из другого компонента в react-native

Question

Я попытался открыть модальное окно из другого компонента в react-native, но модальное окно не открывается. поэтому, пожалуйста, помогите мне, если есть какое-либо решение. это мой код

modal.js

import React from './node_modules/react';
import { View, Text } from 'react-native';

const ProfileModal = () => {
    return (
            <View>
                <Text>HELLO TEXT</Text>
            </View>
    );
}

export default ProfileModal;

----------------------------------------
header.js
import ProfileModal from './ProfileModal';
import { Image, View, TouchableOpacity, Text } from 'react-native';
import Modal from 'react-native-modal';

const openLoginPopup = () => {
 return (
           <TouchableOpacity onPress={() => this.openModal}>
            <Text> Login </Text>
           </TouchableOpacity>
        )
}

const openModal = () => {
  return (
    <Modal isVisible={true}>
       <ProfileModal />
    </Modal>
  )

}

Спасибо,

Answer 1

Это как если бы вы написали модальное содержимое в модальном файле. Таким образом, вы можете сделать это примерно так:

modal.js

import React, {useState} from 'react';
import { View, Text } from 'react-native';

const ProfileModal = () => {
    return (
            <View>
                <Text>HELLO TEXT</Text>
            </View>
    );
}

export default ProfileModal;

----------------------------------------
header.js
import ProfileModal from './ProfileModal';
import { Image, View, TouchableOpacity, Text } from 'react-native';
import Modal from 'react-native-modal';

const Header = () => {
  const [open, setOpen] = useState(false)
  return (
    <View>
      {/* some content */}

      {/* btn trigger */}

       <TouchableOpacity onPress={() => setOpen(true)}>
          <Text> Login </Text>
       </TouchableOpacity>


      <Modal isVisible={open}>
        <ProfileModal />
      </Modal>
    </View>
  )
}

или

modal.js

import React, {useState} from 'react';
import { View, Text } from 'react-native';

const ProfileModal = ({ open }) => {
    return (
      <Modal isVisible={open}>
        <View>
           <Text>HELLO TEXT</Text>
        </View>
      </Modal>
    );
}

export default ProfileModal;

----------------------------------------
header.js
import ProfileModal from './ProfileModal';
import { Image, View, TouchableOpacity, Text } from 'react-native';
import Modal from 'react-native-modal';

const Header = () => {
  const [open, setOpen] = useState(false)
  return (
    <View>
      {/* some content */}

      {/* btn trigger */}

       <TouchableOpacity onPress={() => setOpen(true)}>
          <Text> Login </Text>
       </TouchableOpacity>


        <ProfileModal open={open} />
    </View>
  )
}

Answer 2

В этом случае response-native-modal обеспечивает обратный вызов onBackdropPress, onBackButtonPress для закрытия.

Вы можете использовать его следующим образом:

const ProfileModal = ({ open, onClose }) => {
  return (
    <Modal isVisible={open} onBackButtonPress={onClose} onBackdropPress={onClose}>
      <View>
        <Text>HELLO TEXT</Text>{' '}
      </View>
    </Modal>
  )
}

Затем передайте функцию onClose при ее использовании:

 <ProfileModal open={open} onClose={()=> setOpen(false)} />

Answer 3

Прежде всего, метод openModal не является частью openLoginPopup, поэтому удалите его перед методом openModal.

Просто используйте его, как показано ниже,

const openLoginPopup = () => {
 return (
           <TouchableOpacity onPress={openModal}>
            <Text> Login </Text>
           </TouchableOpacity>
        )
}

Вторая проблема была что вам также не нужна функция стрелки в событии onPress, пока вы не захотите передать некоторые параметры в метод openModal. Вы можете напрямую передать имя метода, и он будет работать.