react-navigation包含了一下三类导航器:
StackNavigator:用于提供屏幕(页面)之间的互相跳转。当一个新的屏幕打开的时候,他被显示在最顶部。
TabNavigator :一个切换卡,用于多个屏幕之间的切换。
DrawerNavigator -:提供一个从屏幕左侧划出的抽屉。用于放菜单选项。
屏幕渲染导航器
导航器仅仅是react的一个响应式组件。
要学习如何创建屏幕,请阅读:
navigation
的 prop
允许屏幕适配一个 navigation
,比如新打开一个屏幕。
navigation
的 navigationOptions
用来定制一个导航器,比如头部标题,标签等。
在顶级组件上调用导航
如果你想要是用来自同一级别的导航器,那么你可以使用 React
的 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; }} />
);
}
}
请注意这个方法仅仅适用于顶级导航器。
Navigation 容器
当
navigation
的prop
属性丢失时,内置导航器将自动成为顶级顶级的导航器(navigators),这个功能提供了一个透明的导航容器,这将成为一个顶级导航器。
当呈现其中一个导航器时,导
navigation
的prop
可选的。当它丢失时,容器将进入并管理它自己的导航状态。它还可以处理url、外部链接和Android back按钮。
为了方便,内置的 导航器 有这个能力,因为他们在幕后使用
createNavigationContainer
。通常,导航器需要一个 导航支柱navigation prop
才能正常工作。
顶级导航器接受以下的props":
onNavigationStateChange(prevState, newState, action)
uri前缀(uriPrefix )
app可能处理一个uri前缀,当处理一个深链接以提取传递到路由器的路径时,将使用该方法。