React Navigation - Navigators

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 (
      { 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 时会用来提取路由用到的路径

你可能感兴趣的:(React Navigation - Navigators)