Question

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

A）在根视图中，我总是安装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 - 组件，并安装在树中的某个位置，靠近触发它的位置。

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

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

Answer 1

我个人使用React Navigation 中的 Stack Navigator在我的应用程序中实现模式。我的模式包括“创建发布模式”，“没有互联网连接模式”。

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

要了解StackNavigator，它有专门针对透明背景模式
的部分
To learn更多有关一般在React Navigation中实现模式的信息。

使用反应原生模态的最佳做法

1 个答案: