React Native createBottomTabNavigator 从常量添加自定义颜色

Question

我正在研究createBottomTabNavigator的实现。我添加了一个tabBarIcon，我想使用我在全局样式文件中的const中定义的全局颜色，如下所示：

全球风格.js

import { StyleSheet } from "react-native";
export const Colors = {
...
orange: "#F59200",
...
};

路由器.js

import React, { Component } from "react";
...
import { StackNavigator } from "react-navigation";
import { createBottomTabNavigator, BottomTabBar } from "react-navigation-tabs";
import Icon from "react-native-vector-icons/FontAwesome";
import Colors from "MyApp/app/config/global.style";
...
import HomeScreen from "../screens/HomeScreen";
...
export const Tabs = createBottomTabNavigator({
HomeScreen: {
screen: HomeScreen,
navigationOptions: () => ({
tabBarLabel: "My Home Screen",
tabBarIcon: ({ tintColor }) => (
// color={Colors.orange} does not work here 
<Icon name="rocket" color={Colors.orange} size={24} />
)
})
},
...

我找到了很多示例，展示了如何直接添加颜色，它有效：

HomeScreen: {
screen: HomeScreen,
navigationOptions: () => ({
tabBarLabel: "My Home Screen",
tabBarIcon: ({ tintColor }) => (
<Icon name="rocket" color="#F59200" size={24} />
)
})
}

但是我想知道是否有办法传递常量颜色值。

有什么想法吗？

提前感谢！

Answer 1

尝试添加到导航或遵循反应导航

tabBarOptions: {
activeTintColor: 'green',
inactiveTintColor: 'white',
inactiveBackgroundColor:'green'
},