StackNavigator是react-native的導航組件，其采用堆棧式的頁面導航來實現(xiàn)各個界面跳轉(zhuǎn)

• 引入

import { StackNavigator } from 'react-navigation';

import {NavigationColors} from './common/CommonColors';
import Login from './login/Login';
import ForgetPassword from './login/ForgetPassword';

除了需要引入 StackNavigator 組件外，還需要引入需要配置的頁面組件

• 構(gòu)造函數(shù)

// Return createNavigationContainer
export function StackNavigator(
  routeConfigMap: NavigationRouteConfigMap,
  stackConfig?: StackNavigatorConfig,
): NavigationContainer;

• routeConfigMap

  routeConfigMap 是路由配置，用于配置路由對應的頁面

  // 路由配置
  const routeConfigMap = {
      Login: {
          screen: Login,   // 必須, 其他都是非必須
          navigationOptions: ({navigation}) => ({
              title: '登錄',
              header: null,   // 隱藏頂部導航欄
          })
      },
      ForgetPassword: {
          screen: ForgetPassword,
      }
  };
  

  這里引入了登錄以及忘記密碼兩個頁面

  • screen 為頁面對應的組件，必須配置
  • navigationOptions 頁面的導航配置

• stackConfig

  stackConfig 是導航配置，用于配置導航的初始頁面，以及頁面相關的一些配置選項

  const stackConfig = {
      initialRouteName: 'Login',  // 默認顯示界面
      mode: 'card',   // 頁面跳轉(zhuǎn)方式
      headerMode: 'screen',   // 導航的動畫模式
      navigationOptions: { // 屏幕導航的默認選項, 也可以在組件內(nèi)用 static navigationOptions 設置(會覆蓋此處的設置)
          mode: 'card',   // 頁面切換模式, 左右是card(相當于iOS中的push效果), 上下是modal(相當于iOS中的modal效果)
          headerMode: 'screen', // 導航欄的顯示模式, screen: 有漸變透明效果, float: 無透明效果, none: 隱藏導航欄
          headerBackTitle: null,  //設置跳轉(zhuǎn)頁面左側(cè)返回箭頭后面的文字,默認是上一個頁面的標題
          headerTruncatedBackTitle: '返回',
          headerStyle: {      //導航欄的style
              backgroundColor: NavigationColors.navigationBGColor,
          },
          headerTitleStyle: {     //導航欄的title的style
              color: NavigationColors.navigationTitleColor,
              alignSelf : 'center',   //居中顯示
          },
          headerTintColor: NavigationColors.navigationTintColor,  // 返回鍵的顏色
      },
  };
  
  

  • initialRouteName 初始路由，默認是路由配置的第一項
  • initialRouteParams 初始路由參數(shù)，可通過 this.props.navigation.state.params 獲取
  • navigationOptions 頁面的導航配置,相同的配置選項會被 routeConfigMap 中的配置覆蓋
  • paths 路由中設置的路徑的覆蓋映射配置
  • mode 頁面跳轉(zhuǎn)方式
    • card 默認的跳轉(zhuǎn)方式，相當于push
    • modal 模態(tài)跳轉(zhuǎn)方式
  • headerMode 導航的動畫方式
    • float 漸變，類似iOS原生效果
    • screen 與屏幕同步
    • none 沒有動畫
  • cardStyle 頁面樣式，這里可以統(tǒng)一配置
  • transitionConfig 跳轉(zhuǎn)動畫，會覆蓋默認的動畫
  • onTransitionStart 頁面開始跳轉(zhuǎn)時條用
  • onTransitionEnd 頁面跳轉(zhuǎn)完成時調(diào)用

• navigationOptions

  navigationOptions 是頁面的導航配置，既可以在routeConfigMap配置公共的通用的導航配置，還可以在 stackConfig 中對每個頁面進行單獨的導航配置，也可以在頁面中進行靜態(tài)配置，這種方式適合需要動態(tài)更新某些導航設置的頁面。

  導航配置的優(yōu)先級是：

  頁面的靜態(tài)配置 > routeConfigMap > stackConfig
  

  navigationOptions 選項解析：

  • title 標題，可以作為頭部標題 headerTitle ，或者 Tab 標題 tabBarLabel，如果設置了這個，導航欄和標簽欄的 title 就會變成一樣的，==不推薦使用==
  • header 導航的屬性，如果隱藏頂部導航欄只要將這個屬性設置為 null
  • headerTitle 導航欄標題，推薦使用
  • headerBackTitle 返回標題，默認為上個頁面的標題，如果想不顯示，可以設置為 null
  • headerTruncatedBackTitle 返回標題不符合顯示時，顯示此屬性
  • headerRight 導航右邊組件
  • headerLeft 導航左邊組件
  • headerStyle 導航樣式
  • headerTitleStyle 導航標題樣式
  • headerBackTitleStyle 導航返回標題的樣式
  • headerTintColor 導航欄顏色
  • headerPressColorAndroid 導航顏色紋理，僅安卓5.0以上版本可用
  • gesturesEnabled 側(cè)滑返回設置，iOS 默認 true，Android 默認 false

  頁面導航的靜態(tài)配置:

  static navigationOptions = ({ navigation }) => ({
      headerTitle: `${navigation.state.params.title}`,    // 動態(tài)更新標題
  });
  

• 渲染

  配置完后就可以使用了

  const Navigations = StackNavigator(routeConfigMap, stackConfig);
  
  export default class App extends Component<Props> {
  
      render() {
          return <Navigations />;
      }
  }