美文网首页
React Navigation-介绍Navigators

React Navigation-介绍Navigators

作者: 急眼的蜗牛 | 来源:发表于2018-01-26 12:56 被阅读51次

    Navigators(导航器)

    Navigators允许您定义应用程序的导航结构。 Navigators还可以渲染通用元素,例如可以配置的标题栏和选项卡栏。
    导航器是普通的React组件。

    内建导航器

    react-navigation 包含以下几个函数来帮助我们创导航:

    • StackNavigator- 为app中的屏幕到堆栈最顶层转场提供了过度途径。
    • TabNavigator- 用于设置具有多个选项卡的屏幕。
    • DrawerNavigator- 用于设置抽屉导航屏幕。

    使用Navigators渲染屏幕

    导航器渲染仅仅是React组件的应用程序屏幕。
    要了解如何创建屏幕,请阅读以下内容:

    调用导航器顶层组件

    如果你想从同一级别使用navigation,你可以使用react 的 ref 选项:

    import { NavigationActions } from 'react-navigation';
    
    const AppNavigator = StackNavigator(SomeAppRouteConfigs);
    
    class App extends React.Component {
      someEvent() {
        // call navigate for AppNavigator here:
        this.navigator && this.navigator.dispatch(
          NavigationActions.navigate({ routeName: someRouteName })
        );
      }
      render() {
        return (
          <AppNavigator ref={nav => { this.navigator = nav; }} />
        );
      }
    }
    

    请注意,这个解决方案只能用在顶级导航器上。

    导航容器

    当导航属性丢失时,内置导航器可以自动表现为根导航器。该功能提供了一个透明的导航容器,这是顶级导航属性的来源。
    当渲染其中一个导航器时,导航属性是可选的。当它丢失时,容器进入并管理其自己的导航状态。它还处理URL,外部链接和Android后退按钮集成。

    为了方便起见,内置的导航器具有这种能力,因为幕后他们使用createNavigationContainer。通常,导航器需要导航属性才能起作用。

    根导航器接受以下属性:

    onNavigationStateChange(prevState, newState, action)
    

    每次由导航器管理的导航状态发生变化,该函数都会被调用。它接收到以前的状态,新的导航状态和发生状态变化的动作。默认情况下会将状态更改打印到控制台。

    uriPrefix

    应用程序可能会处理的URI的前缀。这将在处理深层链接( deep link以提取路径传递到路由器时使用。

    相关文章

      网友评论

          本文标题:React Navigation-介绍Navigators

          本文链接:https://www.haomeiwen.com/subject/zwgiaxtx.html