Блог

Я пытаюсь использовать простой функциональный компонент для рендеринга всплывающего окна. Я следил за страницей github с react-native-модулем. https://github.com/react-native-community/react-native-modal

По какой-то причине я продолжаю получать сообщение об ошибке рядом с render (), в котором говорится, что мне нужен; когда во всем моем другом коде он настроен таким же образом. Причиной этого является что-то еще?введите описание изображения здесь

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

function Popup() {
  const [isModalVisible, setModalVisible] = useState(false);

  const toggleModal = () => {
    setModalVisible(!isModalVisible);
  };

  render() {
    return (
      <View style={{flex: 1}}>
        <Button title="Show modal" onPress={toggleModal} />

        <Modal isVisible={isModalVisible}>
          <View style={{flex: 1}}>
            <Text>Hello!</Text>

            <Button title="Hide modal" onPress={toggleModal} />
          </View>
        </Modal>
      </View>
    );
  }
}

export default Popup;
  

Вы можете использовать только render в компоненте класса.

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

function Popup() {
  const [isModalVisible, setModalVisible] = useState(false);

  const toggleModal = () => {
    setModalVisible(!isModalVisible);
  };

    return (
      <View style={{flex: 1}}>
        <Button title="Show modal" onPress={toggleModal} />

        <Modal isVisible={isModalVisible}>
          <View style={{flex: 1}}>
            <Text>Hello!</Text>

            <Button title="Hide modal" onPress={toggleModal} />
          </View>
        </Modal>
      </View>
    );
  }

export default Popup;