Question

当用户单击底部标签导航器的另一个图标时，我一直在尝试更改图标的颜色，但是我设法更改了背景颜色和标签颜色，但没有更改图标，欢迎您提供帮助。

Mainflow:createBottomTabNavigator({

    Home:{
       screen:Main,
       navigationOptions:{  
        tabBarLabel:'Blood',  
        tabBarIcon:({tintColor})=>(  
            <MaterialCommunityIcons name="drink" color="white" size={30}></MaterialCommunityIcons>
        )  
      } 

    },

    Chart:{
    screen:History,

       navigationOptions:{  
        tabBarLabel:'History',  
        tabBarIcon:({tintColor})=>(  
            <MaterialCommunityIcons name="chart-bar" color="white" size={30}></MaterialCommunityIcons>
        )  
      },
      tabBarOptions:{
        activeTintColor:"blue"
      } 

    },



    Options:{
      screen:History,
         navigationOptions:{ 

          tabBarLabel:'Options',  
          tabBarIcon:({tintColor})=>(  
              <MaterialIcons name="person" color="white" size={30}></MaterialIcons>
          )  
        } 

      }

    },

那是我的导航器，我可以像这样在功能组件内部使用navigationOptions更改标签颜色


History.navigationOptions = function ({ navigation }) { 
return {

    tabBarIcon:<MaterialCommunityIcons name="food-fork-drink" color="black" size={30}></MaterialCommunityIcons>,


    tabBarOptions: {
      tabBarIcon:<MaterialCommunityIcons name="food-fork-drink" color="black" size={30}></MaterialCommunityIcons>,

      tabBarLabel:"cambio",
       showIcon:true,
      activeTintColor: '#0082FB',
      adaptive:true,
      labelPosition:"below-icon",
      iconStyle:{
        color:"blue"
      },
      labelStyle: {
        color:"blue",
        fontSize: 15,
        fontWeight:"bold",

      },
      style: {
        color:"blue",
        backgroundColor: '#0082FB',      
        height:height*0.10,
        position:"absolute",        
        borderTopColor: "transparent"
      },


  },


  }
}

Answer 1

如果您尝试更改为图标颜色，则可以通过tintColor道具进行存档。

const BottomTab = createBottomTabNavigator({
    Home:{
       screen:Main,
       navigationOptions:{  
        tabBarLabel:'Blood',  
        tabBarIcon:({tintColor})=>(  
            <MaterialCommunityIcons name="drink" color={tintColor} size={30}></MaterialCommunityIcons>
        )
      }
    },

    Chart:{
      screen:History,
      navigationOptions:{  
        tabBarLabel:'History',  
        tabBarIcon:({tintColor})=>(  
            <MaterialCommunityIcons name="chart-bar" color={tintColor} size={30}></MaterialCommunityIcons>
        )  
      }
    },
    Options:{
      screen:History,
       navigationOptions:{ 
        tabBarLabel:'Options',  
        tabBarIcon:({tintColor})=>(  
            <MaterialIcons name="person" color="white" size={30}></MaterialIcons>
        )  
      } 
    }
  },
  {
    tabBarOptions: {
      activeTintColor: 'white', // --> active icon color
      inactiveTintColor: 'black', // --> inactive icon color
    }
  }
)

BottomTabNavigator通过反应导航在功能组件中动态更改图标颜色

1 个答案: