Изменить состояние модального виджета вне его класса в React Native

Question

У меня есть два разных файла: HomeScreen.js и ModalWidget.js. Второй файл содержит реализацию модального диалогового окна, и мне нужно вызвать этот виджет, нажав кнопку на главном экране. Также этот модал должен иметь возможность закрывать себя кнопкой на нем. Я попытался использовать глобальный хук состояния, но он дал мне сообщение об ошибке: Invariant Violation: Invalid Hook call. Итак, как я могу вызвать этот модал с домашнего экрана?

ModalWidget. js

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

export function ModalWidget(modalState) {

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

  return (
    <Modal
        animationType="slide"
        transparent={true}
        visible={modalVisible}
      >
      <Button
        title="Close"
        onPress={setModalVisible(false)}
      />
    </Modal>

  )
};

HomeScreen. js

import React, { useState } from 'react';
import { Text, View } from 'react-native';
import { ModalWidget } from '../components/ModalWidget';

export default function HomeScreen() {

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

  return (
    <View style={styles.container}>
      <ModalWidget
        state={modalState}
      />
      <Button
        title="Open"
        onPress={setModalVisible(true)}
      />
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
  },
});

Answer 1

Попробуйте передать функцию в качестве опоры, а также ее в HomeScreen. HomeScreen. js

<ModalWidget
  state={modalState}
  onPress={closeModel}
/>

closeModel(){
  setModalVisible(true)
}

ModalWidget. js

<Modal
  animationType="slide"
  transparent={true}
  visible={modalVisible}
>
  <Button
    title="Close"
    onPress={props.onPress()}
  />
</Modal>

Кроме того, вы не можете получить доступ к состоянию в компоненте функции.