航海家

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 指南。