Navigators允许你定义你应用的导航框架,Navigators也会渲染通常的控件,包括headers、tab bars,而且可配置。实际上,navigators是React朴素(plain)的控件。
内置Navigators
react-navigation
包含以下方法来帮你创建navigators:
- StackNavigator - 每次渲染一屏,提供过场动画。当打开新页面时,将其加入栈顶。
- TabNavigator - 渲染一个标签栏来让用户在几个屏幕间切换。
- DrawerNavigator - 提供一个从屏幕左边划入的抽屉栏
使用Navigators来渲染屏幕
navigators渲染的只是React的组件,阅读以下内容学习如何创建屏幕(screen):
-
Screen
navigation
prop 允许屏幕分发导航action,例如打开另一屏 -
Screen
navigationOptions
定制屏幕如何展现,如顶部标题、tab标签等
在顶级控件调用Navigate
如果你想在定义navigator的同级控件中使用它,可以用ref
选项
const AppNavigator = StackNavigator(SomeAppRouteConfigs);
class App extends React.Component {
someEvent() {
// call navigate for AppNavigator here:
this.navigator && this.navigator.dispatch({ type: 'Navigate', routeName, params });
}
render() {
return (
<AppNavigator ref={nav => { this.navigator = nav; }} />
);
}
}
注意:此解决方案只能用在navigator的顶级中。
导航容器
当navigation prop缺失时,内置的navigators可以自动成为顶级的navigators。这个功能提供了一个透明的navigation容器,作为顶级navigation prop的来源。
当渲染其中一个navigator时,navigation prop是可选的。当缺失时,容器介入并管理它自己的导航状态。他也集成了处理URLs,外联以及安卓的back键的功能。
为了方便的目的,内置的navigators有这样的能力,因为在底层,他们使用createNavigationContainer
。通常,navigators为了运行需要一个navigation prop。
顶级的navigators接受如下属性:
onNavigationStateChange(prevState, newState, action)
这个方法在每次导航状态变化时都会调用。它接受到的参数是上一个状态、新状态以及使状态发生变化的action。默认会在控制台打印状态变化的log。
uriPrefix
URIs的前缀app可能会处理。当处理 deep link 时会用来提取路由用到的路径