搭建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'
// },
}
}
);
