React Navigation导航器之createMaterialTopTabNavigator实现类似于今日头条tab切换页面的效果

API

createMaterialTopTabNavigator(RouteConfigs,TabNavigatorConfig)

参数说明

RouteConfigs

请先看这里

navigationOptions配置项参数说明

1. title：tabBarLabel中的文字
2. swipeEnabled：Boolean 是否可以滑动切换tab页面，如果不设置则使用TabNavigatorConfig中的swipeEnabled选项一般在TabNavigatorConfig中设置
3. tabBarOnPress：Object 点击tab的回调方法该方法接收两个参数
   （1）navigation（this.props.navigation中的值）
   （2）defaultHandler（tab press 的默认 handler）

TabNavigatorConfig

1. initialRouteName：tab页面打开的时候显示的tab页面
2. order：由RouteConfigs的key组成的数组，按照该数组的顺序显示对应的tab页面
3. backBehavior：在tab页面按手机返回键的动作。值为initialRoute的时候返回到initialRouteName页面；值为none时返回上一页面或退出程序。默认为initialRoute
4. tabBarPosition：tab bar的位置 top或bottom；默认top
5. swipeEnabled：Boolean左右滑动屏幕的时候是否切换tab，默认true
6. animationEnabled：切换tab页面的时候是否显示动画
7. lazy：Boolean 打开tab页面的时候是否开启懒加载，默认false，渲染全部的tab页面；当为true的时候只有进入tab页面是才渲染对应的tab页面
8. optimizationsEnabled：是否将tab页面用 <ResourceSavingScene /> 包裹。如果为true在tab页面失去焦点的时候会移除当前页面提高内存使用率
9. initialLayout：object包含width和height可以防止tab view渲染的延迟
10. tabBarComponent：值为一个组件，用来覆盖tab bar
11. tabBarOptions：object
    例：

    tabBarOptions:{
    	activeTintColor:"",//控制活跃状态下tab文字和icon的颜色
    	inactiveTintColor:"",//控制非活跃状态下tab文字和icon的颜色
    	showIcon:Boolean,//是否显示icon，默认false
    	showLabel:Boolean,//是否显示tab上的文字，默认true
    	upperCaseLabel:Boolean,//如果tab上的文字是英文是否大写，默认true
    	pressColor:"",//被按下的tab的背景色  Android>5.0
    	pressOpacity:float,//被按下tab的透明度  iOS，Android<5.0
    	scrollEnabled:Boolean,//tab是否能够滑动，值为true时，当tab超出屏幕宽度的时候tab能够滚动。
    	tabStyle:{//定义tab bar中tab的样式(下图中蓝色框区域)
    		backgroundColor:"",
    		height:30
    	},
    	indicatorStyle:{//指示器的样式(下图中的红条)
    	},
    	labelStyle:{//控制tab label的样式(下图中tab文字的黑色背景区域)
    	},
    	iconStyle:{//定义icon的样式
    	},
    	style:{//定义tab bar的样式（下图中整个黄色背景）
    	}
    }
    

示例

App.js

import React from 'react'
import {createStackNavigator, createMaterialTopTabNavigator, createAppContainer} from 'react-navigation'
import Detail from './components/Detail'
import Logistics from './components/message/Logistics'
import Messages from './components/message/Messages'
import Discount from './components/message/Discount'
import Subscribe from './components/message/Subscribe'

const TopNavigator = createMaterialTopTabNavigator({
    Logistics:{
        screen:Logistics,
        navigationOptions:{
            title:"物流"
        }
    },
    Messages:{
        screen:Messages,
        navigationOptions:{
            title:"通知"
        }
    },
    Discount:{
        screen:Discount,
        navigationOptions:{
            title:"优惠"
        }
    },
    Subscribe:{
        screen:Subscribe,
        navigationOptions:{
            title:"订阅"
        }
    }
},{
    animationEnabled:false,
    initialRouteName:"Subscribe",
    backBehavior:"none",
    order:["Discount","Logistics","Subscribe","Messages"],
    tabBarOptions:{
        activeTintColor:"red",
        inactiveTintColor:"yellow",
        pressColor:"red",
        scrollEnabled:false,
        tabStyle:{
            borderColor:"blue",
            borderWidth:2,
            height:30
        },
        indicatorStyle:{
            backgroundColor: "red",
            height:5
        },
        labelStyle:{
            backgroundColor:"black"
        },
        style:{
            backgroundColor:"yellow"
        }
    }
})

const StackNavigator = createStackNavigator({
    Detail:{
        screen: Detail,
        navigationOptions: {
            title: "详情页"
        }
    },
    Message:{
        screen:TopNavigator,
        navigationOptions:{
            title:"消息"
        }
    }
},{
    initialRouteName:"Detail",
    headerLayoutPreset:"center"
})

export default createAppContainer(StackNavigator)

Detail.js

import React from 'react'
import {View, Text, Button} from 'react-native'

export default class Detail extends React.Component{
    render(){
        return (
            <View>
                <Text>Detail</Text>
                <Button title={'打开消息页面'} onPress={()=>{
                    this.props.navigation.navigate("Message")
                }}/>
            </View>
        )
    }
}

4个tab页面 Logistics.js、Messages.js、Discount.js、Subscribe.js

import React from 'react'
import {View, Text, Button} from 'react-native'

export default class Logistics extends React.Component{
    render(){
        return (
            <View>
                <Text>物流</Text>
            </View>
        )
    }
}

效果图

##动态设置tab标签
代码

import React,{Component} from 'react'
import {createMaterialTopTabNavigator,createAppContainer} from 'react-navigation'
import PopularPages from "./PopularPages";

export default class Popular extends Component{
    static createTabs(){
    	//tab数据源
        const languages = ['Vue','React','Angular','jQuery','JavaScript']
        let tabPages = {}
        languages.map((value,index)=>{
            tabPages[value]={
            	// 以函数的方式书写、这样写不行  screen:<PopularPages tabName={value}/>
                screen:props => <PopularPages {...this.props} tabName={value}/>
            }
        })
        return tabPages
    }
    topNavigator(){
        let topTabs = createMaterialTopTabNavigator(
            Popular.createTabs(),
            {
                lazy:true,
                tabBarOptions:{
                    upperCaseLabel:false,
                    scrollEnabled:true,//tabs超出屏幕宽度可以滚动
                    tabStyle:{
                        minWidth:100//tab的宽度
                    }
                }
            }
        )
        return createAppContainer(topTabs)
    }
    render(){
        let Pages = this.topNavigator()
        return <Pages/>
    }
}