航海家

Navigator 是 React Native 的默认导航器。Navigator 组件管理一堆路由对象，并提供管理该堆栈的方法。

<Navigator
  ref={(navigator) => { this.navigator = navigator }}
  initialRoute={{ id: 'route1', title: 'Route 1' }}
  renderScene={this.renderScene.bind(this)}
  configureScene={(route) => Navigator.SceneConfigs.FloatFromRight}
  style={{ flex: 1 }}
  navigationBar={
    // see "Managing the Navigation Bar" below
    <Navigator.NavigationBar routeMapper={this.routeMapper} /> 
  }
/>

管理路由栈

首先，请注意 initialRoute 道具。路径只是一个 javascript 对象，可以采用你想要的任何形状，并具有你想要的任何值。这是你在导航堆栈中的组件之间传递值和方法的主要方式。

Navigator 根据其 renderScene 道具返回的值知道要渲染的内容。

renderScene(route, navigator) {
  if (route.id === 'route1') {
    return <ExampleScene navigator={navigator} title={route.title} />; // see below
  } else if (route.id === 'route2') {
    return <ExampleScene navigator={navigator} title={route.title} />; // see below
  }
}

让我们假设在这个例子中 ExampleScene 的实现：

function ExampleScene(props) {

  function forward() {
    // this route object will passed along to our `renderScene` function we defined above.
    props.navigator.push({ id: 'route2', title: 'Route 2' });
  }

  function back() {
    // `pop` simply pops one route object off the `Navigator`'s stack
    props.navigator.pop();
  }

  return (
    <View>
      <Text>{props.title}</Text>
      <TouchableOpacity onPress={forward}>
        <Text>Go forward!</Text>
      </TouchableOpacity>
      <TouchableOpacity onPress={back}>
        <Text>Go Back!</Text>
      </TouchableOpacity>
    </View>
  );
}

配置导航器

你可以使用 configureScene prop 配置 Navigator 的过渡。这是一个传递 route 对象的函数，需要返回一个配置对象。这些是可用的配置对象：

• Navigator.SceneConfigs.PushFromRight（默认）
• Navigator.SceneConfigs.FloatFromRight
• Navigator.SceneConfigs.FloatFromLeft
• Navigator.SceneConfigs.FloatFromBottom
• Navigator.SceneConfigs.FloatFromBottomAndroid
• Navigator.SceneConfigs.FadeAndroid
• Navigator.SceneConfigs.Horizo​​ntalSwipeJump
• Navigator.SceneConfigs.Horizo​​ntalSwipeJumpFromRight
• Navigator.SceneConfigs.VerticalUpSwipeJump
• Navigator.SceneConfigs.VerticalDownSwipeJump

你可以不经修改地返回其中一个对象，也可以修改配置对象以自定义导航过渡。例如，修改边缘命中宽度以更接近地模拟 iOS UINavigationController 的 interactivePopGestureRecognizer：

configureScene={(route) => {
  return {
    ...Navigator.SceneConfigs.FloatFromRight,
    gestures: {
      pop: {
        ...Navigator.SceneConfigs.FloatFromRight.gestures.pop,
        edgeHitWidth: Dimensions.get('window').width / 2,
      },
    },
  };
}}

管理 NavigationBar

Navigator 组件带有 navigationBar 支柱，理论上可以采用任何正确配置的 React 组件。但最常见的实现使用默认的 Navigator.NavigationBar。这需要一个 routeMapper 支柱，你可以使用它来根据路线配置导航栏的外观。

routeMapper 是一个常规的 javascript 对象，有三个函数：Title，RightButton 和 LeftButton。例如：

const routeMapper = {

  LeftButton(route, navigator, index, navState) {
    if (index === 0) {
      return null;
    }

    return (
      <TouchableOpacity
        onPress={() => navigator.pop()}
        style={styles.navBarLeftButton}
      >
        <Text>Back</Text>
      </TouchableOpacity>
    );
  },

  RightButton(route, navigator, index, navState) {
    return (
      <TouchableOpacity
        onPress={route.handleRightButtonClick}
        style={styles.navBarRightButton}
      >
        <Text>Next</Text>
      </TouchableOpacity>
   );
  },

  Title(route, navigator, index, navState) {
    return (
      <Text>
        {route.title}
      </Text>
    );
  },
};

看更多

有关每个道具的更详细文档，请参阅 Navigator 的官方 React Native Documentation 以及使用 Navigators 的 React Native 指南。