0

Есть два файла: ModalWidget.js (внешний файл виджета) и HomeScreen.js (основная форма). Нужно, чтобы по нажатию кнопки, появлялось модальное окно, реализованное в файле пользовательского виджета, и исчезало по клику кнопки на самом виджете. Моя реализация не работает: кнопка не показывает модальное окно.

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',
  },
});

Как изменять состояние модального окна извне и из самого этого окна, чтобы его можно было открывать с основного экрана, а закрывать по нажатию кнопки на нём? Пробовал сделать глобальный state hook таким образом (в файле ModalWidget), чтобы его можно было изменять дополнительной функцией, но появлялась ошибка Invariant Violation: Invalid Hook call, то есть, как я понимаю, так делать нельзя.

1 ответ 1

1

Получил ответ на англоязычном StackOverflow: https://stackoverflow.com/questions/61140730/change-state-of-modal-widget-outside-its-class-in-react-native

Реализовал так:

ModalWidget.js

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

export function ModalWidget(modalProps) {

  return (
    <Modal
        animationType="slide"
        transparent={true}
        visible={true}
      >
      <Button
        title="Close"
        onPress={modalProps.closeModal()}
      />
    </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}>
      {
        modalState &&
        <ModalWidget
          closeModal={() => {setModalVisible(false)}}
        />
      }
      <Button
        title="Open"
        onPress={setModalVisible(true)}
      />
    </View>
  );
};

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

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.