创建可重用的React Native Modal组件

Question

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

Answer 1

我在使用react-native模态时遇到很多麻烦，有时我启动了该应用程序，即使我将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

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'}/>

希望这对您有帮助

编辑：

创建要在模式内部渲染的单独组件。例如：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>

这样，您可以在单个模式中实现它。