React-Navigation 内置导航器

react-navigation包含了一下三类导航器:
StackNavigator:用于提供屏幕(页面)之间的互相跳转。当一个新的屏幕打开的时候,他被显示在最顶部。
TabNavigator :一个切换卡,用于多个屏幕之间的切换。
DrawerNavigator -:提供一个从屏幕左侧划出的抽屉。用于放菜单选项。


屏幕渲染导航器

导航器仅仅是react的一个响应式组件。
要学习如何创建屏幕,请阅读:
navigationprop 允许屏幕适配一个 navigation,比如新打开一个屏幕。
navigationnavigationOptions 用来定制一个导航器,比如头部标题,标签等。


在顶级组件上调用导航

如果你想要是用来自同一级别的导航器,那么你可以使用 Reactref 选项。

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; }} />
    );
  }
}

请注意这个方法仅仅适用于顶级导航器。


Navigation 容器

navigationprop属性丢失时,内置导航器将自动成为顶级顶级的导航器(navigators),这个功能提供了一个透明的导航容器,这将成为一个顶级导航器。

当呈现其中一个导航器时,导 navigationprop 可选的。当它丢失时,容器将进入并管理它自己的导航状态。它还可以处理url、外部链接和Android back按钮。

为了方便,内置的 导航器 有这个能力,因为他们在幕后使用 createNavigationContainer。通常,导航器需要一个 导航支柱 navigation prop才能正常工作。

顶级导航器接受以下的props":
onNavigationStateChange(prevState, newState, action)

uri前缀(uriPrefix )

app可能处理一个uri前缀,当处理一个深链接以提取传递到路由器的路径时,将使用该方法。

你可能感兴趣的:(React-Navigation 内置导航器)