ReactNative0.59.0动态改变TabBar主题色

1 . BottomNav

import {
    createAppContainer,
    createBottomTabNavigator
} from 'react-navigation'
import React,{Component} from 'react'
import BottomItem from './BottomNavItem'
import Page1 from './Page1'
import Page2 from './Page2'
import Page3 from './Page3'
import Page4 from './Page4'
import Ionicons from 'react-native-vector-icons/AntDesign'
const Tabs = {
    Page1: {
        screen: Page1,
        navigationOptions: {
            tabBarLabel: '首页',
            tabBarIcon: ({tintColor}) => (
                <Ionicons
                    name={'pluscircle'}
                    size={26}
                    style={{color: tintColor}}
                />
            )
        }
    },
    Page2: {
        screen: Page2,
        navigationOptions: {
            tabBarLabel: '搜索',
            tabBarIcon: ({tintColor}) => (
                <Ionicons
                    name={'plus'}
                    size={26}
                    style={{color: tintColor}}
                />
            )
        }
    },
    Page3: {
        screen: Page3,
        navigationOptions: {
            tabBarLabel: '收藏',
            tabBarIcon: ({tintColor}) => (
                <Ionicons
                    name={'creditcard'}
                    size={26}
                    style={{color: tintColor}}
                />
            )
        }
    },
    Page4: {
        screen: Page4,
        navigationOptions: {
            tabBarLabel: '我的',
            tabBarIcon: ({tintColor}) => (
                <Ionicons
                    name={'mail'}
                    size={26}
                    style={{color: tintColor}}
                />
            )
        }
    },
};
export default class Bottom extends Component{
    _getTabs(){
        const {Page1,Page2,Page3} = Tabs;
        const TabC = {Page1,Page2,Page3};
        const Bottom = createBottomTabNavigator(TabC,{
            tabBarComponent:BottomItem
        });
        return createAppContainer(Bottom);
    }
    render(){
        const TabNav = this._getTabs();
        return <TabNav/>
    }
}

2. BottomNavItem

import React,{Component} from 'react'
import {BottomTabBar} from 'react-navigation-tabs'

export default class BottomNavItem extends BottomTabBar{
    constructor(props){
        super(props);
        this.theme = {
            tintColor:this.props.navigation.activeTintColor,
            updateTime:new Date().getTime()
        }
    }
    render(){
        const navigation = this.props.navigation;
        const {routes,index} = navigation.state;

        if (routes[index].params){
            const {theme} = routes[index].params;

            if (theme && theme.updateTime > this.theme.updateTime){

                this.theme = theme;

            }
        }
        return <BottomTabBar
            {...this.props}
            activeTintColor={this.theme.tintColor || navigation.activeTintColor}
        />

    }
}

3. Page1

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

export default class Page1 extends Component {
    render() {
        const navigation = this.props.navigation;

        return <View style={styles.container}>
            <Text>Page1</Text>
            <Button
                title='改变主题色'
                onPress={() => {
                    navigation.setParams({
                        theme: {
                            tintColor: 'red',
                            updateTime: new Date().getTime()
                        }
                    });
                }}
            >
            </Button>

        </View>
    }
}
const styles = StyleSheet.create({
    container: {
        marginTop: 50
    }
});

赋简单DEMO

动态配置选项卡

import Page2 from './Page2'
import {
    createAppContainer,
    createMaterialTopTabNavigator
} from 'react-navigation'
import React,{Component} from 'react'
import {View, StyleSheet} from 'react-native'

export default class TopNav2 extends Component{
    constructor(props){
        super(props);
    }
    _genTop(){
        const Tabs = ['iOS','Android','JavaScript','Html5','CSS'];
        const TabC = {};
        Tabs.forEach((item,index)=>{
            TabC[`Tab${index}`] = {
                screen:props=><Page2 {...this.props} tabBarLabel = {item}/>,
                navigationOptions:{
                    title:item
                }
            }

        });
        return TabC;
    }

    render(){
        const Top = createMaterialTopTabNavigator(this._genTop(),{
          tabBarOptions:{
              upperCaseLabel:false,
              tabStyle:{
                  minWidth:50,
                  color:'cyan'
              },
              indicatorStyle:{
                  height:2,
                  backgroundColor:'orange'
              },
              labelStyle:{
                  color:'red',
              },
              style:{
                  backgroundColor:'yellow'
              }

          }

        });
        const TopNav = createAppContainer(Top);
        return <View style={{marginTop:30,flex:1}}>
            <TopNav/>
        </View>
    }
}

Page2

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

export default class Page2 extends Component{
    render(){
        const {tabBarLabel} = this.props;
        return <View style={styles.container}>
            <Text>Page2</Text>
            <Text>{tabBarLabel}</Text>
        </View>
    }
}

const styles = StyleSheet.create({
    container:{
        marginTop:50
    }
});