创建可重用的React Native Modal组件

Question

我将回到React Native的基础知识，因为我感到不知所措。我一直在寻找一个可重用的模态组件的实现。我正在寻找RN中可重用模态组件的示例？提前感谢

Answer 1

你可以在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'}/>

希望这能对你有所帮助

编辑：

创建要在模式中呈现的单独组件。对于Ex: component1.js、component2.js、component3.js和props

component1.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>

通过这种方式，您可以在单个模式中实现它。

Answer 2

我在使用react-native模式时遇到了很多麻烦，有时我启动了应用程序，但即使我将isVisible属性设置为false也无法关闭它，这在IOs上更是糟糕，我做了一个研究，这些包没有得到正确的维护。

使用顶级导航器可以节省大量时间，如模式文档中推荐的：https://facebook.github.io/react-native/docs/modal。

我尝试过https://github.com/react-native-community/react-native-modal，但遇到了同样的问题，因为它是最初的react-native模式的扩展。

我建议您使用这里描述的反应导航模式：https://reactnavigation.org/docs/en/modal.html#docsNav

Answer 3

你可以参考下面的代码来编写一次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>

注意:如果你在使用不同的文件，不要忘了导入，你也可以将样式作为道具传递。

(你也可以根据你的需求创建/定制道具)

希望这能节省你的时间。

祝你编码愉快！