無法更改標籤欄標籤的顏色

Question

我想改變我的活動標籤標題顏色，我嘗試過使用tabBarOptions，但它只是不會工作，我做錯了什麼？ 這是我的代碼：

Home:{ 
screen: TabNavigator({ 
    Home: { 
    screen: HomeScreen, 
    navigationOptions: ({ navigation }) => ({ 
     title: 'Home', 
     tabBarIcon: ({ tintColor, focused }) => (
     <Ionicons 
     name={focused ? 'ios-home' : 'ios-home-outline'} 
     size={26} 
     style={{ color: focused ? `${tabBarColor}` : tintColor}} 
     /> 
    ), 
     header: null, 
    }), 
    }, 
    Profile: { 
    screen: ProfileScreen, 
    navigationOptions: ({ navigation }) => ({ 
     title: 'Profile', 
     tabBarIcon: ({ tintColor, focused }) => (
     <Ionicons 
     name={focused ? 'ios-people' : 'ios-people-outline'} 
     size={26} 
     style={{ color: focused ? `${tabBarColor}` : tintColor }} 
     /> 
    ), 
     header: null, 
    }), 
    }, 
}), 
tabBarOptions:{ 
    activeTintColor: `${tabBarColor}`, 
} 
} 

我讀我的文檔和搜索的例子，但找不到任何爲我工作。 這就像應用程序只是忽略tabBarOptions。

在此先感謝！

Answer 1

看起來像從文檔改變tabBarLabel 風格，你 需要提供自定義組件基於集中tabBarLabel道具和更新。

嘗試一下本作MyTabBarLabel組件

navigationOptions:() => ({ 
    tabBarLabel: ({focused}) => <MyTabBarLabel title={i18n.t('common.request')} focused={focused} />, 
    tabBarIcon: ({focused}) => <MyTabBarIcon icon='requests' focused={focused}/> 
}) 

例

export default function MyTabBarLabel (props) { 

    return (
    <WFText style={[styles.tabBarLabel, props.focused? styles.tabBarLabelActive : {}]} >{props.title}</WFText> 
); 
} 

const styles = StyleSheet.create({ 
    tabBarLabel: { 
    paddingBottom: 6, 
    fontSize: 10, 
    textAlign: 'center' 
    }, 
    tabBarLabelActive: { 
    color: 'red' 
    } 
}); 

替換你的組件到位MyTabBarLabel和MyTabBarIcon的

參見： https://reactnavigation.org/docs/navigators/tab#Screen-Navigation-Options