如何在本机反应中更改活动页脚选项卡颜色？答案

【问题标题】：How to change active footer tab color in react native?如何在本机反应中更改活动页脚选项卡颜色？
【发布时间】：2020-05-22 09:14:39
【问题描述】：

我正在使用 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',
       },
     });

更改页脚选项卡时默认将灰色更改为白色。单击页脚选项卡时，我需要将颜色从白色更改为红色。我该如何解决这个问题？

【问题讨论】：

标签： react-native native-base

【解决方案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,....

【讨论】：