React Native NavigatorIOS API 使用
通过学习React Native的NavigatorIOS发现官方写的Demo不便于新手学习,现把自己学习过程遇到的坑记录并分享出来。
NavigatorIOS包装了UIKit的导航功能,可以使用左划功能来返回到上一界面。
路由
React Navtie通过路由:一个路由是用于描述导航器中一页的对象。NavigatorIOS的第一个路由通过initialRoute属性来提供。
|
|
现在MyView会被导航器渲染出来。它可以通过route属性获得对应的路由对象,导航器本身,还有所有passProps中传递的属性。
initialRoute
两个必须属性 :component
title
initialRoute的完整属性定义:
|
|
导航器
导航器是一个object
,包含了一系列导航函数,可供视图调用。它会作为props
传递给NavigatorIOS渲染的任何组件
。
|
|
导航器对象包含如下的函数:
- push(route) - 导航器跳转到一个新的路由。
- pop() - 回到上一页。
- popN(n) - 回到N页之前。当N=1的时候,效果和pop()一样。
- replace(route) - 替换当前页的路由,并立即加载新路由的视图。
- replacePrevious(route) - 替换上一页的路由/视图。
- replacePreviousAndPop(route) - 替换上一页的路由/视图并且立刻切换回上一页。
- resetTo(route) - 替换最顶级的路由并且回到它。
- popToRoute(route) - 回到某个指定的路由。
- popToTop() - 回到最顶层的路由。
Ref引用方式获取NavigatorIOS的导航函数
导航函数也可以从NavigatorIOS的子组件中获得:
从子组件中获得导航函数一定要注意,只能通过Ref
引用方式。否则使用this.props.navigator.push()
会报错:undefined is not an object(evaluationg 'this.props.navigator.push')
未定义对象错误。
|
|
Demo介绍
Demo有三个文件,分别是index.ios.js
FirstScene.js
SecondScene.js
其中index.ios.js
里进行了NavigatorIOS的组件渲染,在导航栏右边有一个More按钮,点击可以Push SecondScene.js
页面。NavigatorIOS
的initialRoute
里的componet
:FirstScene
(第一个Route
组件对象,相当于iOS
中UINavigationController
的rootViewCotroller
)。title
:'First Scene'
。(title
可以随意字符串)。
()。
FirstScene里面有一个按钮,点击也可以Push SecondScene.js 页面。使用NavigatorIOS的主要原因是可以让原生UINavigationController
一样可以使用左划功能来返回到上一界面
。
Demo地址:
https://github.com/MsgIM/MsgIMNavi.git