React Native的导航有两种,一种是iOS和Android通用的叫做Navigator,一种是支持iOS的叫做NavigatorIOS。我们这里只讨论通用的Navigator。会了Navigator,NavigatorIOS也就不是什么难事了。
本文所使用的是React Native 0.34。FB团队更新的太快了,我会在后续出现大的改动的时候更新本文以及代码。
Navigator基础
Navigator在不同的Scene之间跳转。
initialRoute对象
这是Navigator所必须的,用于指定第一个Scene。renderScene方法,这个方法必须。用flow的语法来描述的话是这样的
renderScene(router: any, navigator: Navigator)。renderScene方法用来根据一个给定的route来绘制Scene。如:(route, navigator) => { <MySceneComponent title={route.title} navigator={navigator} />}push方法,
push(route: any)。Navigator使用这个方法跳转到一个新的Scene。
API就了解这么多,下面看一个简单的例子。数据都是写死的。
这个例子的主要功能就是从一个Scene(组件)HomeController,跳转到另外的一个组件PetListController。就是从一组用户里点选一个之后显示这个用户拥有的宠物列表。
代码里的User数据以及用户的Pets数据都是写死的。如果要学习网络请求方面的内容可以参考
延伸阅读
学习是年轻人改变自己的最好方式