Создайте многоразовый модальный компонент React Native

Вы можете найти много примеров этого на StackOverflow. Тем не менее, если вам нужен пример, я могу помочь вам с одним примером. Вы упомянули модальный компонент в своем вопросе, верно?

Ваш компонент будет выглядеть так с реквизитами. пусть имя будет ModalComponent для этого файла.

render() {
    const { isVisible, message, textValue } = this.props;
    return (
      <Modal
        animationType = "slide"
        transparent = {false}
        isVisible = {isVisible}
        backdropColor = {"white"}
        style = {{ margin: 0 }}
        onModalHide = {() => {}}>
        <View>
          <Text>textValue</Text>
          <Text>message</Text>
        </View>
      </Modal>
    );
  }

так что теперь в вашем файле js вам нужно импортировать этот модальный компонент, а после этого вам нужно написать как

  <ModalComponent 
       isVisible = {true}
       textValue = {'hi there'}
       message = {'trying to make a basic component modal'}/>

Надеюсь, это поможет вам

Обновлено:

Создайте отдельные компоненты, которые вы хотите отображать внутри модального окна. например: component1.js, component2.js, component3.js с реквизитами

компонент1.js:

render(){
    const { textVal, message } = this.props
    return (
      <View>
        <Text>{textVal}</Text>
        <Text>{message}</Text>
      </View>
    )
  }

теперь в ModalComponent

render() {
  const { first, second, third, isVisible, component1Text, component1Message } = this.props;



  <Modal
      animationType = "slide"
      transparent = {false}
      isVisible = {isVisible}
      backdropColor = {"white"}
      style = {{ margin: 0 }}
      onModalHide = {() => {}}>
      <View>
        {first && <component1
          textValue= component1Text
          message= component1Message />}
        {second && <Component2 />}
        {third && <Component2 />}
      </View>
    </Modal>

Таким образом, вы можете достичь этого в одном модальном режиме.

У меня было много проблем с использованием модального режима реагирования, иногда я запускал приложение и не мог его закрыть, даже когда я устанавливал для свойства isVisible значение false, это еще хуже для IO, я провел исследование, и эти пакеты не поддерживаются правильно.

Вы сэкономите много времени, используя навигатор верхнего уровня, который рекомендуется в модальной документации: https://facebook.github.io/react-native/docs/modal.

Я попробовал https://github.com/react-native-community/react-native-modal, но у меня были те же проблемы, потому что это расширение оригинального модального окна с реакцией.

Я предлагаю вам использовать модальный режим навигации, как описано здесь: https://reactnavigation.org/docs/en/modal.html#docsNav

Вы можете обратиться к следующему коду, чтобы один раз написать модальный компонент и использовать его несколько раз.

Напишите один раз:

import React, { Component } from 'react';

import { View, Text, Button, Modal, ScrollView, } from 'react-native';

export class MyOwnModal extends Component {

    constructor(props) {
    super(props);
    this.state = {

}

      render() {

         return(

            <Modal
            key = {this.props.modalKey}
            transparent = {this.props.istransparent !== undefined ? true : false}
            visible = {this.props.visible}
            onRequestClose = {this.props.onRequestClose}>

            <View style = {{
                //your styles for modal here. Example:
                marginHorizontal: width(10), marginVertical: '30%',
                height: '40%', borderColor: 'rgba(0,0,0,0.38)', padding: 5,
                alignItems: 'center',
                backgroundColor: '#fff', elevation: 5, shadowRadius: 20, shadowOffset: { width: 3, height: 3 }
            }}>

                <ScrollView contentContainerStyle = {{ flex: 1 }}>
                    {this.props.children}
                </ScrollView>

            </View>
        </Modal>
        );
     }
   }

В настоящее время,

Вы можете вызвать свой Modal, как показано в следующем примере: (Делая это, вы избегаете повторного написания Modal и его внешних стилей каждый раз!)

Пример

  <MyOwnModal modalKey = {"01"} visible = {true} onRequestClose = {() => 
     this.anyFunction()} istransparent = {true}>

    <View>
       // create your own view here!
    </View>

  </MyOwnModal>

Примечание. Если вы используете разные файлы, не забудьте импортировать , а также вы можете передать стили в качестве реквизита.

(Вы также можете создавать / настраивать реквизит в соответствии с вашими требованиями)

Надеюсь, это сэкономит ваше время.

Удачного кодирования!

Вы создадите компонент, подобный этому, предоставив родительскому компоненту полную свободу изменять его с помощью свойств.

render() {
  const { isVisible, message, textValue, animationType, backDropColor, style, onModalHide, children } = this.props;
  return (
    <Modal
      animationType= {animationType || 'slide'}
      transparent = {transparent || false}
      isVisible = {isVisible || false}
      backdropColor = {backdropColor || "white"}
      style = {[modalStyle, style]}
      onModalHide = {onModalHide}>
      {children}
    </Modal>
  );
}

Затем в вашем родительском компоненте вам нужно импортировать этот компонент следующим образом:

import ModalComponent from '../ModalComponent'; //path to your component

<ModalComponent isVisible = {true}>
  <View>
    //any view you want to be rendered in the modal
  </View>
</ModalComponent>

Я участник Реагировать-родной-использовать-модальный.

Это пример создания многоразового модального окна в общем виде и с использованием react-native-use-modal: https://github.com/zeallat/creating-reusable-react-native-alert-modal-examples

С react-native-use-modal вы можете легко создавать многоразовые модальные окна.

Это сравнительная статья с общим методом: https://zeallat94.medium.com/creating-a-reusable-reactnative-alert-modal-db5cbe7e5c2b