如何在本机反应中更改活动页脚标签的颜色？

Question

我正在使用nativebase.io设计我的React Native应用。它具有3页脚选项卡屏幕。更改页脚标签时，我需要更改页脚标签图标和文本颜色。

这是我的示例代码

import React, { Component } from 'react';
import { StyleSheet, View } from 'react-native';
import { Root, Text, Container, Header, Content, Footer, FooterTab, Button, Icon } from 'native-base';

import MyDailyTask from './FooterTabs/MyDailyTask';
import MyNotes from './FooterTabs/MyNotes';
import MyReminds from './FooterTabs/MyReminds';

export default class FooterContainer extends Component {
    constructor(props) {
        super(props)
        this.state = {
          loading: true,
          index: 0, // tab index
        }
       }

       switchScreen(index) {
          this.setState({index: index})
       }

       render() {
         const { index } = this.state;
         let AppComponent = null;

         if (index == 0) {
           AppComponent = MyDailyTask
         } else if(index == 1) {
           AppComponent = MyNotes
         } else if(index == 2) {
           AppComponent = MyReminds
         }  else {
           AppComponent = Home
         }


         return (
           <Root>
           <Container>
             <Content>
               <AppComponent/>
             </Content>
             <Footer>
               <FooterTab>
                 <Button vertical active={index === 0} onPress={() => this.switchScreen(0)}>
                   <Icon name="apps" />
                   <Text>Tab1</Text>
                 </Button>
                 <Button vertical active={index === 1} onPress={() => this.switchScreen(1)}>
                   <Icon name="paper" />
                   <Text>Tab2</Text>
                 </Button>
                 <Button vertical active={index === 2} onPress={() => this.switchScreen(2)}>
                   <Icon active name="add" />
                   <Text>Tab3</Text>
                 </Button>

               </FooterTab>
             </Footer>
           </Container>
         </Root>
         );
       }
     }

     const styles = StyleSheet.create({
       container: {
         flex: 1,
         backgroundColor: '#fff',
         alignItems: 'center',
         justifyContent: 'center',
       },
     });

默认情况下，更改页脚标签时，将灰色更改为白色。单击页脚选项卡时，我需要将白色更改为红色。如何解决此问题？

Answer 1

const VendorBottomTabs=createBottomTabNavigator({
Home:{screen:VendorTopTabs,
  navigationOptions:{
    tabBarLable:'Home',
    tabBarIcon:({tintColor})=>(
     <Image source={require('./Images/home.png')} style={{width:30,height:30,resizeMode:'contain',tintColor:tintColor}}/>
     )
  }
},
Order:{screen:VendorOrders,
  navigationOptions:{
    tabBarLable:'Myorder',

    tabBarIcon:({tintColor})=>(
     <Image source={require('./Images/orders.png')} style={{width:30,height:30,resizeMode:'contain',tintColor:tintColor}}/>
     )
  }
},
Dashboard:{screen:VendorDashBoard,
  navigationOptions:{
    tabBarLable:'Dashboard',

    tabBarIcon:({tintColor})=>(
     <Image source={require('./Images/dashboard.png')} style={{width:25,height:25,resizeMode:'contain',tintColor:tintColor}}/>
     )
  }
},
Profile:{screen:VendorProfile,
  navigationOptions:{
    tabBarLable:'Profile',

    tabBarIcon:({tintColor})=>(
     <Image source={require('./Images/profile.png')} style={{width:25,height:25,resizeMode:'contain',tintColor:tintColor}}/>
     )
  }
},
 },{
  initialRouteName:'Home',
  navigationOptions:{headerShown:false ,activeTintColor: '#0596C5'},
  tabBarOptions: {
  activeTintColor: '#0596C5',
  showIcon: true,
 },
})
 try this,....