React-native导航实验示例?

几个星期前我开始使用react-native.对于我的第一个应用程序,我使用导航器进行导航,其导航栏组件显示标题和左/右侧按钮.在阅读完Facebook后,它已经放弃了对导航器的支持并开发导航实验或导航-rfc(将调用’NavExp’使其缩短),我正在尝试使用NavExp.但我无法理解它.

应用程序菜单:Android的DrawerLayout,IOS的TabIOS.并且将具有导航栏以根据内容显示标题和右侧(内容特定菜单 – 打印,复制)/左(用于菜单)按钮.

>导航器和NavExp有什么区别? (它说它提供redux或flux风格导航,也无法理解)
>减速机的目的是什么?(使用哪一个?(堆栈,查找))
> NavigationRootContainer?
>在哪里声明我的所有状态,因为这些是常数?
>行动和国家有什么区别?
>对于导航器,我们使用renderScene函数在NavExp中实际渲染场景

在一个问题解决方案中解决这个问题非常多,所以通过做一些研究然后将这个问题分成几个小问题,你可能会得到更好的服务.这里有一些指导可以帮助您入门.

总体而言:新NavigationExperimental的目的是为React Native创建无状态导航结构,遵循与React相同的原则.与新的NavExp相比,旧的Navigator组件更依赖于维护和变异状态.如果您考虑React如何喜欢采用一组道具,然后在某些内容发生变化时渲染出全新的UI,新的NavExp旨在为此提供更多便利.

这是因为当您使用类似Flux的模式来管理应用程序中的状态时更有用.我建议阅读Flux,或者在我看来,更容易掌握Redux模式的实现.

这回答了#1的范围,在通过这些链接后你会更好地理解#2的答案.

> NavigationRootContainer是一个有用的元素(虽然不是必需的),它在使用NavExp时提供了一些结构和功能. Facebook的例子使用它.如果您使用Redux之类的东西实现NavExp,则不需要使用一个,因为您将复制reducers的使用.
>我假设你在决定渲染适当的场景/卡片/屏幕时谈论状态?这些可以在任何地方声明,而且实际上只是字符串.你甚至不需要在任何地方声明它们.
> State是组成应用程序移动部分的数据和变量的集合.例如,如果您有一个购物车应用程序,您可以将客户的名称和购物车的内容存储在您的应用程序状态,以及他们当前所在的屏幕,他们之前使用的屏幕等等.任何可以改变进入状态.

行动就像向空中射击,以警告应用程序的其他部分发生了变化.用户是否在购物车中添加了新商品?发送ITEM_ADDED_TO_CART操作以及项目的ID.用户按下主屏幕按钮?发送NAVIGATE_TO_SCREEN操作以及主屏幕的标识符. reduce由reducers处理,reducers对状态进行更改,然后告诉React Native开始重新渲染所有内容.

>这不是一个问题,但你也有一个带有NavExp的renderScene方法,它以几乎相同的方式运行:它吐出屏幕的内容,无论它应该是什么.

(仅供参考,我对此没有任何官方消息,但是如果您已经熟悉Navigator并已实现它,那么在可预见的未来,您可能会继续使用它,而不是重写您的应用程序以利用NavigationExperimental. )

相关文章

react 中的高阶组件主要是对于 hooks 之前的类组件来说的,如...
我们上一节了解了组件的更新机制,但是只是停留在表层上,例...
我们上一节了解了 react 的虚拟 dom 的格式,如何把虚拟 dom...
react 本身提供了克隆组件的方法,但是平时开发中可能很少使...
mobx 是一个简单可扩展的状态管理库,中文官网链接。小编在接...
我们在平常的开发中不可避免的会有很多列表渲染逻辑,在 pc ...