React Native createBottomTabNavigator Добавить настроенный цвет из констант

Question

Я работаю над реализацией createBottomTabNavigator. Я добавил tabBarIcon, и я хотел бы использовать глобальный цвет, который я определил в const в файле глобальных стилей, как показано ниже:

global.style.js

import { StyleSheet } from "react-native";

export const Colors = {
 ...
  orange: "#F59200",
 ...
};

Router.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} />
          )
        })
      }

Но я хотел бы знать, есть ли способ передать значение const Colors вместо этого.

Есть идеи?

Заранее спасибо!

Answer 1

Попробуйте добавить в навигацию или следовать по реакции-навигации

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