React-native Navigation之TabNavigator

在0.44之后开始推荐使用React Navigation下的主键开发
这篇博客主要讲解React-Navigation之TabNavigator
开始工作第一步：导入新包，我使用的yarn add react-navigation，也有看到其他有使用npm添加的，但在我这里我没有成功，还是装了一个yarn
第二步：引入模块

import {TabNavigator,StackNavigator} from 'react-navigation';

第三步：配置tab

const MyApp = TabNavigator({    Home: {        screen: Home,        navigationOptions: {//配置TabNavigator的一些属性            tabBarLabel: '首页',//标签栏的title，这里设置的与标题一样，如不一样时可进行设置            //设置标签栏的图标            tabBarIcon: ({tintColor}) => (                <Image                    source={require('./res/images/home.png')}                    style={[{tintColor: tintColor}, styles.icon]}                />),        }    },    Businessmen: {        screen: Businessmen,        navigationOptions: {            tabBarLabel: '商家',            tabBarIcon: ({ tintColor }) => (                <Image                    source={require('./res/images/businessmen.png')}                    style={[styles.icon, {tintColor: tintColor}]}                />            ),        }    },    Mine: {        screen: Mine,        navigationOptions: {            tabBarLabel: '我的',            tabBarIcon: ({ tintColor }) => (                <Image                    source={require('./res/images/mine.png')}                    style={[styles.icon, {tintColor: tintColor}]}                />            ),        }    },    More: {        screen: More,        navigationOptions: {            tabBarLabel: '更多',            tabBarIcon: ({ tintColor }) => (                <Image                    source={require('./res/images/more.png')}                    style={[styles.icon, {tintColor: tintColor}]}                />            ),        }    },},{    animationEnabled: false, // 切换页面时不显示动画    tabBarPosition: 'bottom', // 显示在底端，android 默认是显示在页面顶端的    swipeEnabled: false, // 禁止左右滑动    backBehavior: 'none', // 按 back 键是否跳转到第一个 Tab， none 为不跳转    tabBarOptions: {//配置标签栏的一些属性        activeTintColor: '#e91e63',// 文字和图片选中颜色        inactiveTintColor: '#666', // 文字和图片默认颜色        showIcon: true, // android 默认不显示 icon, 需要设置为 true 才会显示        indicatorStyle: {height: 0}, // android 中TabBar下面会显示一条线，高度设为 0 后就不显示线了 暂时解决这个问题        style: {    // 整个table的样式            backgroundColor: '#F5FCFF', // TabBar 背景色            height: 50,        },        tabStyle:{    // 单个table的样式            // backgroundColor:'#ddd',            padding: 0,//取消默认高度            margin: 0,        },        //标签页图片显示区域样式        iconStyle:{            // backgroundColor:'blue',            margin: 0,        },        labelStyle: {            fontSize: 10, // 文字大小            margin: 0,        },    },});

我在使用的时候发现太牛币了，居然还能改变图标的颜色，难道是我少见多怪吗，哈哈，完成：)