Question

由于不知所措，我将回归React Native的基础知识。我一直在寻找可重用的模式组件的实现。我在寻找RN中可重用Modal组件的示例吗？预先感谢

Answer 1

您将创建一个这样的组件，让父组件可以通过 props 自由更改它。

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>

Answer 2

您可以在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，然后您需要编写为

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

希望这对您有帮助

编辑：

     Create seperate components that you want to render inside modal. for Ex: component1.js, component2.js, component3.js with props

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

       now in 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>

 In this way you can achieve it. within single modal.

Answer 3

我有很多使用麻烦的反应本地模式，有时我开始应用，不能接近它，甚至当我设置ISVISIBLE道具假的，它是更坏在iOS上，我做了研究，这些包没有适当的维护。

您将使用模态文档中推荐的顶级导航器（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

Answer 4

您可以参考以下代码来一次编写Modal组件并多次使用。

写一次：

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>

注意：如果您使用的是其他文件，请不要忘记导入，也可以将样式作为道具传递。

（您也可以根据需要创建/自定义道具）

希望这可以节省您的时间。

祝您编程愉快！

Answer 5

我是 react-native-use-modal 的贡献者。

这是一个以通用方式创建可重用模态并使用 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

创建一个可重用的React Native Modal组件

5 个答案: