原文連結

提供了screen之間相互跳轉的方式，每一個新的screen將置於棧頂。

預設情況下，棧導航器的配置是蘋果和安卓熟悉的look和feel：ios中新的screen從有的劃入，安卓中是從底部淡入。在ios中，也可以設定成從底部劃入的modal形式。

API 定義

createStackNavigator(RouteConfigs, StackNavigatorConfig);

RouteConfigs

第一個引數：路由配置物件是路由名稱與路由配置的對映，告訴導航器路由裡有哪些東西。

createStackNavigator({
  // 對於每一個能跳轉到的screen，建立這樣的實體:
  Profile: {
    // `ProfileScreen` 是react元件，是screen的主要內容，（就是之前文章裡提過的在screen裡註冊過的元件）.
    screen: ProfileScreen,
    // 當`ProfileScreen` 被StackNavigator載入, 那麼他就有了`navigation`屬性，（系列文章第一篇第一句就是這個）.

    // Optional: When deep linking or using react-navigation in a web app, this path is used:
    path: 'people/:name',
    // The action and route params are extracted from the path.

    // Optional: Override the `navigationOptions` for the screen
    navigationOptions: ({ navigation }) => ({
      title: `${navigation.state.params.name}'s Profile'`,
    }),
  },

  ...MyOtherRoutes,
});
 

StackNavigatorConfig

第二個引數：路由器選項

• initialRouteName - 設定預設screen. 必須是第一個引數中的key之一（比如 'Profile'）.
• initialRouteParams - 初始路由的引數
• initialRouteKey - 初始路由可選識別符
• navigationOptions - screens的預設導航選項
• paths - 會覆蓋第一個引數中設定的對映

視覺化選項：

• mode - 定義了渲染和過渡的風格:
  • card - 預設選項，使用ios和安卓標準風格.
  • modal - screen從底部劃入. 只在ios有效，安卓無影響.
• headerMode - 指明頭部的渲染方式:
  • float
    - 渲染一個頂部的唯一header，當screen變化時渲染. 是iOS的共通模式.
  • screen - 每一個screen都attache一個header並且header隨著screen一起淡入淡出. 是Android的共通模式.
  • none - header不被渲染（如果不需要header導航欄，可以用這個選項）.
• headerTransitionPreset -  當headerMode: float 時，指定header怎樣在screen之間過度.
  • fade-in-place - Header components cross-fade without moving, similar to the Twitter, Instagram, and Facebook app for iOS. This is the default value.
  • uikit - An approximation of the default behavior for iOS.
• cardStyle - Use this prop to override or extend the default style for an individual card in stack.
• transitionConfig - Function to return an object that is merged with the default screen transitions (take a look at TransitionConfig in type definitions). Provided function will be passed the following arguments:
  • transitionProps - Transition props for the new screen.
  • prevTransitionProps - Transitions props for the old screen.
  • isModal - Boolean specifying if screen is modal.
• onTransitionStart - Function to be invoked when the card transition animation is about to start.
• onTransitionEnd - Function to be invoked once the card transition animation completes.

（大多都是跳轉過度效果設定）

navigationOptions

（兩個引數裡頭都能設定該項，如果都進行了設定，以第二個引數會被覆蓋，因為第一個引數是每個screen的個性化設定，第二個引數裡頭是通用設定）

title

string型別，是headerTitle的備選項。另外如果巢狀在TabNavigator中，則是tabBarLabel的備選項，巢狀在DrawerNavigator中，是drawerLabel的備選項。（備選項的意思就是如果沒有設定該項，則使用title中的設定）

header

react元素或者返回值是react元素的函式，作為header顯示，設定為null隱藏header

headerTitle

字串，react元素或者react元件。預設顯示title中的設定。使用元件時，接收allowFontScaling，style和children三個屬性。字串標題將會傳入children中。

headerTitleAllowFontScaling

header的標題字型是否縮放以適應文字尺寸的設定。預設為真。

headerBackImage

react元素或者元件，在header返回按鈕處顯示自定義圖示。當使用元件時，接收tintColor，title等一些屬性。預設是圖片元件，在ios平臺是v型箭頭，在安卓平臺是<-箭頭

headerBackTitle

ios中被返回按鈕使用的字串，設定成null禁用。預設使用上一個頁面的headerTitle。該屬性必須在原始screen中定義，而不是目標screen中。例如要從A到B，想要在B中禁用：

StackNavigator({
  A: {
    screen: AScreen,
    navigationOptions: () => ({
      title: `A`,
      headerBackTitle: null
    }),
  },
  B: {
    screen: BScreen,
    navigationOptions: () => ({
      title: `B`,
    }),
  }
});

headerTruncatedBackTitle

當headerBackTitle不適應螢幕時，該屬性字元會被返回按鈕使用。預設時"返回",定義方式與headerBackTitle一樣：

StackNavigator({
  A: {
    screen: AScreen,
    navigationOptions: () => ({
      title: `A`,
      headerBackTitle: 'A much too long text for back button from B to A',
      headerTruncatedBackTitle: `to A`
    }),
  },
  B: {
    screen: BScreen,
    navigationOptions: () => ({
      title: `B`,
    }),
  }
});

headerRight

展示在header右側的react元素

headerLeft

顯示在header左邊的react元素或者元件。當使用元件時，接收onPress，title，titleStyle等屬性-點選檢視完整的列表

headerStyle

header的style物件

headerForceInset

允許將forceInset物件傳遞到header內部的SafeAreaView中

headerTitleStyle

title元件的style物件

headerBackTitleStyle

返回title的style物件

headerTintColor

header的顏色

headerPressColorAndroid

material的波紋顏色（安卓版本大於5.0）

headerTransparent

預設時false。如果設定成true，header沒有背景色，除非你在headerStyle或者headerBackground中明確指定。

headerBackground

使用該屬性與headerTransparent，提供一個元件來渲染header的背景。

gesturesEnabled

是否能使用手勢關閉screen。ios預設true，安卓預設false。

gestureResponseDistance

是一個物件，覆寫從screen邊緣開始觸控到可識別的這段距離。有以下兩個屬性：

• horizontal - 數字- 水平距離，預設25.
• vertical - 數字 - 垂直距離，預設135.

gestureDirection

字串，覆寫關閉手勢的方向。"default"時正常，“inverted”是從右向左

Navigator Props

StackNavigator（...)建立navigator元件需要下列屬性：

screenProps - 向ziscreen傳遞額外選項, 例如:

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

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

Examples

const ModalNavigator =createStackNavigator(
  {
    Main: { screen: Main },
    Login: { screen: Login },
  },
  {
    headerMode: 'none',
    mode: 'modal',
    navigationOptions: {
      gesturesEnabled: false,
    },
    transitionConfig: () => ({
      transitionSpec: {
        duration: 300,
        easing: Easing.out(Easing.poly(4)),
        timing: Animated.timing,
      },
      screenInterpolator: sceneProps => {
        const { layout, position, scene } = sceneProps;
        const { index } = scene;

        const height = layout.initHeight;
        const translateY = position.interpolate({
          inputRange: [index - 1, index, index + 1],
          outputRange: [height, 0, 0],
        });

        const opacity = position.interpolate({
          inputRange: [index - 1, index - 0.99, index],
          outputRange: [0, 1, 1],
        });

        return { opacity, transform: [{ translateY }] };
      },
    }),
  }
);