react-navigation学习笔记五：createBott

搭建demo使用相关版本：
"react-native": "0.56.0",
"react-navigation": "^2.18.2"

介绍

移动应用程序中最常见的导航风格可能是基于标签的导航。这可以是屏幕底部或标题下方顶部的标签。官网介绍

简单使用 相关介绍都注释在代码里面了

//createBottomTabNavigator
import React from 'react';
import {Text, View, Image, Button, Dimensions, TouchableOpacity} from 'react-native';
import {createBottomTabNavigator} from 'react-navigation';


//自定义tabBar
const tabBar = () => {
    return <View style={{backgroundColor: 'red', height: 44}}>
        <Text>自定义的tabBar</Text>
    </View>
}

//自定义的tabBarButton
const HomeBtn = () => {
    return <TouchableOpacity
        style={{
            backgroundColor: 'blue',
            width: Dimensions.get('window').width / 2,
            height: 50,
            alignItems:'center',
            justifyContent:'center'
        }}
        onPress={() => {
            console.log('点击了主页')
        }}
    >
        <Text style={{color:'white',fontSize:20}}>主页</Text>

    </TouchableOpacity>
}

//路由组件
class HomeScreen extends React.Component {
    static navigationOptions = {
        //tabBarButton  自定义button
        //这个和title与tabBarIcon  冲突
        tabBarButtonComponent: HomeBtn
    }

    render() {
        return (
            <View style={{flex: 1, justifyContent: 'center', alignItems: 'center'}}>
                <Text>this is HomeScreen!</Text>
            </View>
        );
    }
}

class RecordScreen extends React.Component {
    //用于导航器内的屏幕
    static navigationOptions = {
        // tabBarVisible: true,//true或false显示或隐藏标签栏，如果未设置则默认为true。
        // tabBarAccessibilityLabel: '', //选项卡按钮的辅助功能标签。当用户点击标签时，屏幕阅读器会读取此信息。如果您没有选项卡的标签，建议设置此项。
        // tabBarTestID: '',//用于在测试中找到此选项卡按钮的ID。

        //通用标题可以用作备用headerTitle和tabBarLabel。
        title: '档案',
        //设置tabBarButton的图像
        tabBarIcon: ({focused, horizontal, tintColor}) => {
            return <Image
                source={require('./image/homeH.png')}
                style={{width: 22, height: 22, tintColor: tintColor}}
            />
        },
        //回调处理新闻事件; 参数是一个对象，包含：navigation：屏幕导航道具  defaultHandler：tab按下的默认处理程序
        tabBarOnPress: (event) => {
            event.defaultHandler();//调用组建内默认的实现方法
            console.log('点击了某个tabBatBtn' + event);

        },

        // //tabBarButton  自定义button
        // //这个和title与tabBarIcon  冲突
        // tabBarButtonComponent: () => {
        //
        // },


    }

    render() {
        return (
            <View style={{flex: 1, justifyContent: 'center', alignItems: 'center'}}>
                <Text>this is RecordScreen!</Text>
            </View>
        );
    }
}

//入口
export default createBottomTabNavigator(
    {
        Home: {screen: HomeScreen},
        Record: {screen: RecordScreen},
    }, {
        initialRouteName: 'Record', //首次加载时初始制表符路径的routeName。
        order: ['Record', 'Home'], //routeNames数组，用于定义选项卡的顺序。

        //可用来自定义  tabBar  这个与下面的tabBarOptions有冲突 配置一个就好了
        // tabBarComponent: tabBar,//可选，覆盖用作标签栏的组件。


        //tabBar 相关配置具有以下属性的对象：
        tabBarOptions: {
            activeTintColor: 'blue',//活动选项卡的标签和图标颜色。
            activeBackgroundColor: 'red',//活动选项卡的背景颜色。
            inactiveTintColor: 'yellow',//非活动选项卡的标签和图标颜色。
            inactiveBackgroundColor: 'pink',//非活动选项卡的背景颜色。

            // showLabel: true,//是否为标签显示标签，默认为true。
            // showIcon: true,//是否显示选项卡的图标，默认为true。

            // style: {},//标签栏的样式对象。
            labelStyle: {//选项卡标签的样式对象。
                fontSize: 20
            },
            // tabStyle: {},//选项卡的样式对象。

            // allowFontScaling: true,//标签字体是否应缩放以符合“文本大小”辅助功能设置，默认为true。

            // //覆盖forceInset道具 < SafeAreaView >。
            // // 默认为{bottom:'always', top:'never'}。可用键top | bottom | left | right随值提供'always' | 'never'。
            // safeAreaInset: {
            //     bottom: 'always',
            //     top: 'never'
            // },
        }
    }
);

API官网介绍