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）等，不能按预期执行的问题，非常好用