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 navigators
    if (route.routes) {
        return getCurrentRouteName(route)
    }
    return route.routeName
}

type Props = {};
export default class App extends Component {
    constructor() {
        super();
        StatusBar.setBarStyle('light-content')
    }

  render() {
    return (
         {
                    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}) => (
                    
                )
            }),
        },

        Mine: {
            screen: MineScene,
            navigationOptions: ({navigation}) => ({
                tabBarLabel: '我的',
                tabBarIcon: ({focused, tintColor}) => (
                    
                )
            }),
        },
    },
    {
        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 {
    render() {
        let selectedImage = this.props.selectedImage ? this.props.selectedImage : this.props.normalImage
        return (
            
        )
    }
}
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(
            
                我是首页
            
        );
    }
}

//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