react-navigation 常用方法總結

1，創建底部選項卡 createBottomTabNavigator

import React from "react";
import { StyleSheet, Image } from "react-native";
import {setSpText, scaleSizeW} from '../utils/util';
import Home from '../page/home/home';
import Task from '../page/task/task';
import Mine from '../page/mine/mine';
import { createBottomTabNavigator, BottomTabBar } from 'react-navigation';
const TabBarComponent = props => <BottomTabBar {...props} />;

const TabNav = createBottomTabNavigator(
  {
    Home: {
      screen: Home,
      navigationOptions: {
        showLabel: true,
        tabBarLabel: "首頁",
        tabBarIcon: ({ focused, tintColor }) => (
          <Image
            source={
              focused
                ? require("../assets/image/tabIcon/homepage-on.png")
                : require("../assets/image/tabIcon/homepage.png")
            }
            resizeMode="contain"
            style={styles.tabBarIconStyle}
          />
        )
      }
    },
    Task: {
      screen: Task,
      navigationOptions: {
        showLabel: true,
        tabBarLabel: '任務',
        tabBarIcon: ({focused, tintColor}) => (
          <Image
            source={
              focused
                ? require('../assets/image/tabIcon/task-on.png')
                : require('../assets/image/tabIcon/task.png')
            }
            resizeMode="contain"
            style={styles.tabBarIconStyle}
          />
        ),
      },
    },
    MyInfo: {
      screen: Mine,
      navigationOptions: {
        showLabel: true,
        tabBarLabel: '我的',
        tabBarIcon: ({focused, tintColor}) => (
          <Image
            source={
              focused
                ? require('../assets/image/tabIcon/myhome-on.png')
                : require('../assets/image/tabIcon/myhome.png')
            }
            resizeMode="contain"
            style={styles.tabBarIconStyle}
          />
        )
      }
    }
  },
  {
    tabBarOptions: {
      // 當前選中的tab bar的文本顏色和圖標顏色
      activeTintColor: '#FF6E1D',
      // 當前未選中的tab bar的文本顏色和圖標顏色
      inactiveTintColor: "#999999",
      // 是否顯示tab bar的圖標，默認是false
      showIcon: true,
      // showLabel - 是否顯示tab bar的文本，默認是true
      showLabel: true,
      // 是否將文本轉換爲大小，默認是true
      upperCaseLabel: false,
      // material design中的波紋顏色(僅支持Android >= 5.0)
      pressColor: "#788493",
      // 按下tab bar時的不透明度(僅支持iOS和Android < 5.0).
      pressOpacity: 0.8,
      // tab bar的樣式
      style: {
        height: scaleSizeW(98),
        backgroundColor: "#fff",
        paddingTop: scaleSizeW(10),
        paddingBottom: scaleSizeW(10),
        borderTopColor: "#ededed",
        elevation: 5
      },
      // tab bar的文本樣式
      labelStyle: {
        fontSize: setSpText(20),
        marginTop: scaleSizeW(3),
        width: "100%",
        marginLeft: 0
      },
      tabStyle: {
        height: scaleSizeW(78),
        flexDirection: "column",
        alignItems: "center",
        justifyContent: "center"
      },
      // tab 頁指示符的樣式 (tab頁下面的一條線).
      indicatorStyle: { height: 0 }
    },
    // tab bar的位置, 可選值： 'top' or 'bottom'
    tabBarPosition: "bottom",
    // 是否允許滑動切換tab頁
    swipeEnabled: false,
    // 是否在切換tab頁時使用動畫
    animationEnabled: false,
    // 是否懶加載
    lazy: true,
    // 返回按鈕是否會導致tab切換到初始tab頁？ 如果是，則設置爲initialRoute，否則爲none。 缺省爲initialRoute。
    backBehavior: "none",
    initialRouteName: "Home"
  }
);

const styles = StyleSheet.create({
  tabBarIconStyle: {
    width: scaleSizeW(40),
    height: scaleSizeW(40)
  },
  icon: {
    width: scaleSizeW(100),
    height: scaleSizeW(100),
    marginTop: scaleSizeW(-60),
    borderRadius: scaleSizeW(50)
  }
});

export default TabNav;

2，頁面的堆棧路由 createStackNavigator

  const Root = createStackNavigator(
  {
    Main: createRouter(TabNav, 'Main'), // 掛載1中的底部選項卡
    Detial: createRouter(Detail, '詳情') // 其他頁面
  },
    {
    initialRouteName: 'Main', // 默認路由
    transitionConfig: () => ({
      screenInterpolator: StackViewStyleInterpolator.forHorizontal,
    }),
  }）

  function createRouter(screen, title, path) {
   // 由於我們使用了一個統一的外層layout組件，不在這裏設置頁面的頭部信息
  return {
    screen,
    path,
    navigationOptions: ({navigation}) => ({
      title,
      tabBarVisible: true,
      header: null,
    }),
  };
}

直接把該組件掛在根組件即可
3，頁面跳轉
一般的跳轉 this.props.navigation.navigate(screenName)
同一個頁面的跳轉/刷新，因爲堆棧路由的原因navigate，會在堆棧中找到screenName，Eg:詳情+列表頁，詳情不刷新，使用push
this.props.navigation.push(screenName)
4，頁面傳參和獲取參數
傳參： this.props.navigation.navigate(‘RouteName’, { id:1 } ）
獲取參數：this.props.navigation.state.params.id
或者this.props.navigation.getParam(‘id’)
5,路由的生命週期
React Navigation 將事件發送到訂閱了它們的頁面組件： 有4個不同的事件可供訂閱：willFocus、willBlur、didFocus 和 didBlur
使用eg:

  import { NavigationEvents } from "react-navigation";
  ...
          <NavigationEvents
            onDidFocus={this.init}
            onWillBlur={() => {
              this.reset(true);
            }}
        />

*這個生命週期可以有效的解決react的生命週期，在選項卡頁面（BottomTabNavigator）等，不能按預期執行的問題，非常好用