React Native + react-native-router-flux:<Scene key='modal' component=Modal/> 有啥作用?

Posted

技术标签:

【中文标题】React Native + react-native-router-flux:<Scene key=\'modal\' component=Modal/> 有啥作用?【英文标题】:React Native + react-native-router-flux: What does <Scene key='modal' component=Modal/> do?React Native + react-native-router-flux:<Scene key='modal' component=Modal/> 有什么作用? 【发布时间】:2016-09-21 16:23:08 【问题描述】:

我是 react-native-router-flux 的新手,看看这个例子。我检查了文档,但我似乎仍然无法弄清楚&lt;Scene key='modal' component=Modal/&gt; 是什么。那么它的用途是什么?

这是确切的行:https://github.com/aksonov/react-native-router-flux/blob/master/Example/Example.js#L95-Lundefined

谢谢

【问题讨论】:

【参考方案1】:

&lt;Scene key='modal' component=Modal/&gt; 设置应用程序,以便模式可以出现在其他所有内容之上。这不是模态本身,只是用于准备应用程序的行,它“可以”在它的顶部加载其他东西......比如 z-index 或正在初始化的最顶层。这有帮助吗?

参考:https://github.com/aksonov/react-native-router-flux/blob/master/docs/API.md#modals-modal-or-scene-modal

从下面的代码示例中,您可以看到“根”(模态线下方的一级)与“实际”模态处于同一级别:

import StatusModal from './components/StatusModal'

<Router>
  <Scene key="modal" component=Modal >
    <Scene key="root">
      <Scene key="screen1" initial=true component=Screen1 />
      <Scene key="screen2" component=Screen2 />
    </Scene>
    <Scene key="statusModal" component=StatusModal />
  </Scene>
</Router>

如果您没有模态框,则不需要该行。它只是在反应原生路由器通量示例中,因为那里有一个模态演示。

【讨论】:

第 4 版发布后,链接的参考 @jakeatwork 已移至 github.com/aksonov/react-native-router-flux/blob/master/docs/…。

以上是关于React Native + react-native-router-flux:<Scene key='modal' component=Modal/> 有啥作用?的主要内容,如果未能解决你的问题,请参考以下文章

react-native 入门资源合集

react-native 学习之Image篇

react-native 图片选取与上传

TypeScript React Native String 文字赋值错误

react-native版文字跑马灯

ubuntu 12.04 react-native 安装