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}) => (
                
            )
        }
    },
    Page2: {
        screen: Page2,
        navigationOptions: {
            tabBarLabel: '搜索',
            tabBarIcon: ({tintColor}) => (
                
            )
        }
    },
    Page3: {
        screen: Page3,
        navigationOptions: {
            tabBarLabel: '收藏',
            tabBarIcon: ({tintColor}) => (
                
            )
        }
    },
    Page4: {
        screen: Page4,
        navigationOptions: {
            tabBarLabel: '我的',
            tabBarIcon: ({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 
    }
}

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 

    }
}

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 
            Page1
             {
                    navigation.setParams({
                        theme: {
                            tintColor: 'red',
                            updateTime: new Date().getTime()
                        }
                    });
                }}
            >
            

        
    }
}
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=>,
                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 
            
        
    }
}

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 
            Page2
            {tabBarLabel}
        
    }
}

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