react-native系列(15)导航篇：底部导航TabNavigator参数及使用详解
本篇主要介绍的是TabNavigator，假设你已经对它的用法已经有了基本的认识，或重新去官网看一下
官网地址：https://reactnavigation.org/zh-Hans/
底部导航TabNavigator的效果类似于微信，效果图：
TabNavigator生成的底部导航的结构，它包括4部分：
- 选项卡栏
- 选项卡
- 图标
- 标签文本
createBottomTabNavigator函数
使用createBottomTabNavigator函数来创建底部导航，它包括2个参数对象：第一个参数用来配置路由页面，第二个参数用来配置底部导航的信息，如样式等。
创建时，相关参数详解如下：
const rootTab = createBottomTabNavigator( {
Page1: { screen: PageView1 },
Page2: { screen: PageView2, params: {}} // 第二个参数params为页面入参
},
{
initialRouteName: 'Page1', // 第一次加载时初始选项卡路由的 routeName
order: ['Page1', 'Page2'], // 定义选项卡顺序的 routeNames 数组
backBehavior: 'initialRoute', // 触发navigation.goBack()方法时是否包括Tab页间切换的的返回操作，不包括为none，包括为initialRoute(默认包括)
// tabBarComponent : (props) => {return <BottomTabBar {...props} />}, // 可选，覆盖用作标签栏的组件，一般会用不上
tabBarOptions: {
activeTintColor: '', // 活动选项卡标签文本和图标颜色
activeBackgroundColor: '', // 活动选项卡的背景色
inactiveTintColor: '', // 非活动选项卡的标签文本和图标颜色
inactiveBackgroundColor: '', // 非活动选项卡的背景色
showLabel: true, // 是否显示选项卡的标签, 默认值为 true
showIcon: false, // 是否显示 Tab 的图标，默认为false
style: {}, // 选项卡栏的默认样式
tabStyle: {}, // 选项卡的默认样式
labelStyle: {}, // 选项卡标签文本的默认样式
allowFontScaling: true // 允许标签字体自动缩放以对界面更友好，默认为: true
},
defaultNavigationOptions: ({ navigation }) => ({
tabBarVisible: true, // true或false用于显示或隐藏标签栏，如果未设置，则默认为true
// 选项卡 自定义图标
tabBarIcon: ({ focused, horizontal, tintColor }) => {
const { routeName } = navigation.state; // 选项卡名称
console.log(focused); // 是否处于活动状态,是为true
console.log(horizontal); // 是否处于横屏,是为true
console.log(tintColor); // 状态颜色值
return(
<View />
);
},
// 选项卡 自定义标签文本
tabBarLabel: ({focused, tintColor}) => {
const { routeName } = navigation.state; // 选项卡名称
console.log(focused); // 是否处于活动状态,是为true
console.log(tintColor); // 状态颜色值
return(
<View />
);
}
})
}
);
贴上完整代码：
import React, { Component } from 'react';import { View, Text } from 'react-native';
import { HomeScreen, SettingsScreen } from './TabScreen';
import { createBottomTabNavigator, createAppContainer } from 'react-navigation';
const rootTab = createBottomTabNavigator(
{
Home: HomeScreen,
Settings: SettingsScreen,
},
{
initialRouteName: 'Home', // 第一次加载时初始选项卡路由的 routeName
order: ['Home', 'Settings'], // 定义选项卡顺序的 routeNames 数组
backBehavior: 'initialRoute', // 触发navigation.goBack()方法时是否包括Tab页间切换的的返回操作，不包括为none，包括为initialRoute(默认包括)
// tabBarComponent : (props) => {return <BottomTabBar {...props} />}, // 可选，覆盖用作标签栏的组件，一般会用不上
tabBarOptions: {
activeTintColor: 'red', // 活动选项卡标签文本和图标颜色
activeBackgroundColor: '#FFFFFF', // 活动选项卡的背景色
inactiveTintColor: 'gray', // 非活动选项卡的标签文本和图标颜色
inactiveBackgroundColor: '#FFFFFF', // 非活动选项卡的背景色
showLabel: true, // 是否显示选项卡的标签, 默认值为 true
showIcon: true, // 是否显示 Tab 的图标，默认为false
// 选项卡栏的样式
style: {
borderTopColor: 'red',
height: 50
},
// 选项卡的默认样式
tabStyle: {
flex: 1,
justifyContent: 'center',
alignItems: 'center'
},
// 选项卡标签文本的默认样式
labelStyle: {
fontSize: 14
},
allowFontScaling: true // 允许标签字体自动缩放以对界面更友好，默认为: true
},
defaultNavigationOptions: ({ navigation }) => ({
tabBarVisible: true, // true或false用于显示或隐藏标签栏，如果未设置，则默认为true
// 选项卡 默认自定义图标
// eslint-disable-next-line
tabBarIcon: ({ focused, horizontal, tintColor }) => {
const { routeName } = navigation.state; // 选项卡名称
console.log(focused); // 是否处于活动状态,是为true
console.log(horizontal); // 是否处于横屏,是为true
console.log(tintColor); // 状态颜色值
let textStyle = {};
if(focused){
textStyle = {
color: 'red'
};
}
return(
<View>
<Text style={textStyle}>{routeName}-Icon</Text>
</View>
);
},
// 选项卡 默认自定义标签文本
// eslint-disable-next-line
// tabBarLabel: ({focused, tintColor}) => {
// const { routeName } = navigation.state; // 选项卡名称
// console.log(focused); // 是否处于活动状态,是为true
// console.log(tintColor); // 状态颜色值
// return(
// <View>
// <Text>{routeName}-Label</Text>
// </View>
// );
// }
})
}
);
const AppNavigatorContainer = createAppContainer(rootTab);
class TabNavigator extends Component {
render(){
return(
<View style={{flex:1}}>
<AppNavigatorContainer />
</View>
);
}
}
export default TabNavigator;
上面代码的图标部分为了方便我用文本表示，这里建议用Image组件或引用Iconfont或svg图标。
另外，贴上其中一个Home页面代码：
import React from 'react';import { Text, View, StyleSheet, TouchableOpacity } from 'react-native';
import PropTypes from 'prop-types';
class HomeScreen extends React.Component {
render() {
const { navigation } = this.props;
return (
<View style={styles.viewContainer}>
<Text style={styles.contextTextStyle}>HomeScreen!</Text>
<TouchableOpacity
style={styles.buttonContainer}
onPress={()=>{navigation.navigate('Settings');}}
>
<Text>To SettingsScreen</Text>
</TouchableOpacity>
</View>
);
}
}
const styles = StyleSheet.create({
viewContainer: {
flex: 1,
alignItems: 'center',
justifyContent: 'center'
},
contextTextStyle: {
fontSize: 30
},
buttonContainer: {
backgroundColor: '#FFFFFF',
borderRadius: 30,
borderWidth: 1,
height: 30,
justifyContent: 'center',
alignItems: 'center',
padding: 5
}
});
HomeScreen.propTypes = {
navigation: PropTypes.object
};
export default HomeScreen;
效果：
如果参照微信的需求，还有一种情况就是需要知道当前有多少条信息，并有个红色的小图标显示在右上角。如果按照上面那种自定义默认图标的方法将无法实现，因为它无法获取Home页面的状态值。那如果我们可以在Hemo页面中也能实现自定义图标不就可以了吗？对的，只要在Home中定义一个静态navigationOptions函数即可，修改上面的Hoem页面代码如下：
import React from 'react';import { Text, View, StyleSheet, TouchableOpacity } from 'react-native';
import PropTypes from 'prop-types';
class HomeScreen extends React.Component {
static navigationOptions = ({ navigation }) => ({
tabBarVisible: true, // true或false用于显示或隐藏标签栏，如果未设置，则默认为true
// 选项卡 自定义图标
// eslint-disable-next-line
tabBarIcon: ({ focused, horizontal, tintColor }) => {
const { routeName } = navigation.state; // 选项卡名称
console.log(focused); // 是否处于活动状态,是为true
console.log(horizontal); // 是否处于横屏,是为true
console.log(tintColor); // 状态颜色值
let textStyle = {};
if(focused){
textStyle = {
color: 'red'
};
}
return(
<View>
<Text style={textStyle}>{routeName}-Icon-信息({navigation.getParam('msg')})</Text>
</View>
);
},
})
state = {
msg: 100
}
componentDidMount() {
this.props.navigation.setParams({ msg: this.state.msg });
}
render() {
const { navigation } = this.props;
return (
<View style={styles.viewContainer}>
<Text style={styles.contextTextStyle}>HomeScreen!</Text>
<TouchableOpacity
style={styles.buttonContainer}
onPress={()=>{navigation.navigate('Settings');}}
>
<Text>To SettingsScreen</Text>
</TouchableOpacity>
</View>
);
}
}
const styles = StyleSheet.create({
viewContainer: {
flex: 1,
alignItems: 'center',
justifyContent: 'center'
},
contextTextStyle: {
fontSize: 30
},
buttonContainer: {
backgroundColor: '#FFFFFF',
borderRadius: 30,
borderWidth: 1,
height: 30,
justifyContent: 'center',
alignItems: 'center',
padding: 5
}
});
HomeScreen.propTypes = {
navigation: PropTypes.object
};
export default HomeScreen;
效果：
以上是 react-native系列(15)导航篇：底部导航TabNavigator参数及使用详解 的全部内容， 来源链接： utcz.com/z/383932.html
