react-native - 使用 native 模式的最佳实践

Question

我的 react-native 应用程序有几种可以呈现不同模式的情况。我想知道实现这一目标的最佳方法是什么。一般来说，我看到两种不同的方法:

a)
在根 View 中，我总是有 Modal - 组件安装并简单地切换内容，就像这样......

<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 -component 并安装在树中的某个位置，靠近它被触发的地方。

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

适用于这两种方法的一个问题是，如果 Modal -component 应该总是被挂载并且只能使用 visible 触发-支柱。如果这是要走的路，我认为方法 b) 需要更多内存，因为 Modal 的多个实例- 组件被创建。

Answer 1

我个人使用的堆栈导航器来自 React Navigation 在我的应用程序中实现模态。我的模态包括“创建后模态”、“无互联网连接模态”等。
这使我可以从应用程序的任何位置访问这些模态，并且可以直接保留/阻止其他操作。要了解有关如何使用 React Navigation 的更多信息，您可以阅读以下两个链接:

了解StackNavigator ，它有一个专用于的部分透明背景模态

To learn更多关于在 React Navigation 中实现模态的一般信息。