本文主要是介绍React Native实现底部Tab切换—TabNavigator，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
功能：
使用React-native-tab-navigator（https://github.com/exponentjs/react-native-tab-navigator） 实现底部选项卡切换
实现效果：
实现过程：
1、项目集成react-native-tab-navigator
在项目根目录下，运行：npm install react-native-tab-navigator –-save
2、核心代码：
App.js代码
import React, {Component} from 'react';
import {Platform, StyleSheet, Text, View,StatusBar,Image} from 'react-native';
import {StackNavigator, TabNavigator, TabBarBottom} from 'react-navigation'import color from './widget/color'
import TabBarItem from './widget/TabBarItem'import HomeScene from './scene/Home/HomeScene'
import MineScene from './scene/Mine/MineScene'const lightContentScenes = ['Home', 'Mine']function getCurrentRouteName(navigationState: any) {if (!navigationState) {return null}const route = navigationState.routes[navigationState.index]// dive into nested navigatorsif (route.routes) {return getCurrentRouteName(route)}return route.routeName
}type Props = {};
export default class App extends Component<Props> {constructor() {super();StatusBar.setBarStyle('light-content')}render() {return (<TabonNavigationStateChange={(prevState, currentState) => {const currentScene = getCurrentRouteName(currentState)const previousScene = getCurrentRouteName(prevState)if (previousScene !== currentScene) {if (lightContentScenes.indexOf(currentScene) >= 0) {StatusBar.setBarStyle('light-content')} else {StatusBar.setBarStyle('dark-content')}}}}/>)}
}const Tab = TabNavigator({Home: {screen: HomeScene,navigationOptions: ({navigation}) => ({tabBarLabel: '首页',tabBarIcon: ({focused, tintColor}) => (<TabBarItemtintColor={tintColor}focused={focused}normalImage={require('../res/img/tabbar/tabbar_homepage.png')}selectedImage={require('../res/img/tabbar/tabbar_homepage_selected.png')}/>)}),},Mine: {screen: MineScene,navigationOptions: ({navigation}) => ({tabBarLabel: '我的',tabBarIcon: ({focused, tintColor}) => (<TabBarItemtintColor={tintColor}focused={focused}normalImage={require('../res/img/tabbar/tabbar_mine.png')}selectedImage={require('../res/img/tabbar/tabbar_mine_selected.png')}/>)}),},},{tabBarComponent: TabBarBottom,tabBarPosition: 'bottom',lazy: true,animationEnabled: false,swipeEnabled: false,tabBarOptions: {activeTintColor: color.primary,inactiveTintColor: color.gray,style: {backgroundColor: '#ffffff'},},}
)
TabBarItem.js代码
import React, { PureComponent } from 'react'
import { Image } from 'react-native'type Props = {tintColor: any,normalImage:any,selectedImage:any,focused:boolean,
}class TabBarItem extends PureComponent<Props> {render() {let selectedImage = this.props.selectedImage ? this.props.selectedImage : this.props.normalImagereturn (<Imagesource={this.props.focused? selectedImage: this.props.normalImage}style={{ tintColor: this.props.tintColor, width: 25, height: 25 }}/>)}
}
export default TabBarItem
HomeScene.js代码
import React, {Component} from 'react';
import {Platform, StyleSheet, Text, View} from 'react-native';export default class HomeScene extends Component{//UI渲染render() {//return不带（）会报错return(<View style={styles.container}><Text style={styles.text}>我是首页</Text></View>);}
}//CSS样式
const styles = StyleSheet.create({container: {flex: 1,justifyContent: 'center',alignItems: 'center',backgroundColor: '#F5FCFF',},text:{fontSize:20,}
});
3、参数
RouteConfigs，配置路由以及对应的 screen 页面， navigationOptions 为对应路由页面的配置选项：
title - Tab标题，可用作 headerTitle 和 tabBarLabel 回退标题
tabBarVisible - Tab的是否可见，没有设置的话默认为 true
tabBarIcon - Tab的icon组件，可以根据 {focused: boolean, tintColor: string} 方法来返回一个icon组件
tabBarLabel - Tab中显示的标题字符串或者组件，也可以根据 { focused: boolean, tintColor: string } 方法返回一个组件
TabNavigatorConfig
tabBarComponent - Tab选项卡组件，iOS默认为 TabBarBottom ，Android默认为 TabBarTop 。TabBarTop - 在页面的顶部,TabBarBottom - 在页面的底部.
tabBarPosition - Tab选项卡的位置，有 top 或 bottom 两个值
swipeEnabled - 是否可以滑动切换Tab选项卡
animationEnabled - 点击Tab选项卡切换界面是否需要动画
lazy - 是否懒加载页面
initialRouteName - 初始显示的Tab对应的页面路由名称
order - 用路由名称数组来表示Tab选项卡的顺序，默认为路由配置顺序
paths - 路径配置
backBehavior - androd点击返回键时的处理，有 initialRoute 和 none 两个值
initailRoute - 返回初始界面
none - 退出
tabBarOptions - Tab配置属性，用在 TabBarTop 和 TabBarBottom 时有些属性不一致：
用于 TabBarTop 时：
activeTintColor - 选中的文字颜色
inactiveTintColor - 未选中的文字颜色
showIcon - 是否显示图标，默认显示
showLabel - 是否显示标签，默认显示
upperCaseLabel - 是否使用大写字母，默认使用
pressColor - android 5.0以上的MD风格波纹颜色
pressOpacity - android 5.0以下或者iOS按下的透明度
scrollEnabled - 是否可以滚动
tabStyle - 单个Tab的样式
indicatorStyle - 指示器的样式
labelStyle - 标签的样式
iconStyle - icon的样式
style - 整个TabBar的样式
用于 TabBarBottom 时：
activeTintColor - 选中Tab的文字颜色
activeBackgroundColor - 选中Tab的背景颜色
inactiveTintColor - 未选中Tab的的文字颜色
inactiveBackgroundColor - 未选中Tab的背景颜色
showLabel - 是否显示标题，默认显示
style - 整个TabBar的样式
labelStyle - 标签的样式
tabStyle - 单个Tab的样式
参考：https://www.cnblogs.com/CrazyWL/p/7283600.html
这篇关于React Native实现底部Tab切换—TabNavigator的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
