React-native Navigation之TabNavigator

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,
        },

    },
});

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