為你的應(yīng)用提供一種切換屏幕的方式，新創(chuàng)建的屏幕放置在棧頂。
默認(rèn)情況下，StackNavigator被配置為在iOS和Android上有類似的外觀和體驗(yàn)：iOS上新頁(yè)面從右邊劃入，Android為從底部淡入。iOS上StackNavigator還可以配置為modal風(fēng)格，新頁(yè)面從底部劃入。

class MyHomeScreen extends React.Component {
  static navigationOptions = {
    title: 'Home',
  }

  render() {
    return (
      <Button
        onPress={() => this.props.navigation.navigate('Profile', {name: 'Lucy'})}
        title="Go to Lucy's profile"
      />
    );
  }
}

const ModalStack = StackNavigator({
  Home: {
    screen: MyHomeScreen,
  },
  Profile: {
    path: 'people/:name',
    screen: MyProfileScreen,
  },
});

API 定義

StackNavigator(RouteConfigs, StackNavigatorConfig)

路徑配置

路徑配置對(duì)象為路徑名到路徑配置的映射，從而告訴navigator當(dāng)前的路徑下展示什么頁(yè)面。

StackNavigator({

  // 每一個(gè)新頁(yè)面都要?jiǎng)?chuàng)建一個(gè)這樣的實(shí)體：
  Profile: {

    // `ProfileScreen` 是當(dāng)前頁(yè)面所要展示的React組件
    screen: ProfileScreen,
    // 當(dāng)`ProfileScreen`被StackNavigator加載時(shí), 他會(huì)被賦予一個(gè)`navigation`屬性.

    // 可選: deeplink 或 web 應(yīng)用中使用:
    path: 'people/:name',
    // The action and route params are extracted from the path.

    // 可選: 對(duì)當(dāng)前頁(yè)重寫 `navigationOptions`
    navigationOptions: ({navigation}) => ({
      title: `${navigation.state.params.name}'s Profile'`,
    }),
  },

  ...MyOtherRoutes,
});

StackNavigatorConfig

可選的路由:

• initialRouteName - 設(shè)置堆棧中默認(rèn)顯示屏，必須是配置中的key.
• initialRouteParams - 初始頁(yè)面參數(shù)
• navigationOptions - 默認(rèn)navigation選項(xiàng)
• paths - 路由設(shè)置中的路徑覆寫的映射

可視選項(xiàng):

• mode - 定義渲染和切換頁(yè)面的風(fēng)格:

  • card - 使用Android/IOS默認(rèn)風(fēng)格，默認(rèn)選項(xiàng)。
  • modal - iOS從底部劃入，Android無(wú)效。

• headerMode - 定義頂部欄如何顯示:

  • float - 頂部固定渲染一個(gè)header，在切換時(shí)播放動(dòng)畫。這是iOS的通常模式。
  • screen - 每一屏都有一個(gè)header，在切換中跟隨頁(yè)面淡入淡出. 這是Android的通常模式。
  • none - 不顯示header.

• cardStyle - 用來(lái)重寫或擴(kuò)展堆棧中的某一頁(yè)面。

• transitionConfig - 定義方法返回一個(gè)對(duì)象來(lái)覆蓋默認(rèn)切屏動(dòng)畫。

• onTransitionStart - 切屏動(dòng)畫開(kāi)始的回調(diào)。

• onTransitionEnd - 切屏動(dòng)畫結(jié)束的回調(diào)。

頁(yè)面導(dǎo)航選項(xiàng)

title 作為headerTitle和tabBarLabel的備用字符串
header React 控件或方法給HeaderProps返回一個(gè)用來(lái)顯示header的控件，設(shè)置為null時(shí)隱藏header。
headerTitle header的標(biāo)題，字符串或控件，默認(rèn)為場(chǎng)景標(biāo)題。
headerBackTitle iOS回退鍵標(biāo)題，為空時(shí)禁用標(biāo)簽。默認(rèn)為場(chǎng)景標(biāo)題。
headerTruncatedBackTitle 當(dāng)headerBackTitle不適合屏幕時(shí)用來(lái)作為回退鍵的標(biāo)題，默認(rèn)為“Back”
headerRight顯示在header右邊的控件
headerLeft 顯示在header左邊的控件
headerStyle header的樣式對(duì)象
headerTitleStyle header標(biāo)題的樣式對(duì)象
headerBackTitleStyle header回退鍵標(biāo)題的樣式對(duì)象
headerTintColor header的tint顏色
headerPressColorAndroid Android5.0以上按鍵按下的漣漪顏色
gesturesEnabled 是否可以使用手勢(shì)關(guān)閉頁(yè)面，默認(rèn)iOS為true，Android為false。

Navigator 屬性

navigator組件通過(guò)StackNavigator(...)獲取一下屬性：

• screenProps - 向下傳遞額外選項(xiàng)，例如：

const SomeStack = StackNavigator({
  // config
});

<SomeStack
  screenProps={/* this prop will get passed to the screen components as this.props.screenProps */}
/>

例子

See the examples SimpleStack.js and ModalStack.js which you can run locally as part of the NavigationPlayground app.
You can view these examples directly on your phone by visiting our expo demo.