使用反应原生模态的最佳实践

Question

我的本机应用程序有几种情况可以呈现不同的模态.我想知道实现这一目标的最佳方法是什么.总的来说,我看到两种不同的方法:

a) 在根视图中,我总是安装了Modal-component,只需切换内容,就像这样......

<View>
    {...}
    <Modal visible={this.props.modal > 0}>
         {this.props.modal === 1 && <ModalContent1 />}
         {this.props.modal === 2 && <ModalContent2 />}
         {this.props.modal === 3 && <ModalContent3 />}
    </Modal>
</View>

b)每个模态都Modal带有它自己的组件,并安装在树中的某个地方,靠近它触发的地方.

你更喜欢哪种方式？为什么？

适用于这两种方法的问题是,如果Modal-component应始终挂载并且仅使用visible-prop 触发.如果这是要走的路,我假设方法b)需要更多内存,因为Modal创建了组件的多个实例.

Answer 1

我个人使用React Navigation中的 Stack Navigator在我的应用程序中实现模式。我的模式包括“创建帖子模式”、“无互联网连接模式”等。

这使我可以从应用程序中的任何位置访问这些模式，并且可以直接保留/阻止其他操作。要了解有关如何使用 React Navigation 的更多信息，您可以阅读以下两个链接：

1. 要了解StackNavigator，它有一个专门用于透明背景模态的部分
2. 了解有关在 React Navigation 中实现模态的更多信息。