react-native - React Native createBottomTabNavigator 从常量添加自定义颜色
问题描述
我正在实现createBottomTabNavigator。我添加了一个tabBarIcon,我想使用我在全局样式文件中的const中定义的全局颜色,如下所示:
global.style.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} />
)
})
}
但我想知道是否有办法传递const Colors 值。
有任何想法吗?
提前致谢!
解决方案
尝试添加到导航或按照react-navigation
tabBarOptions: {
activeTintColor: 'green',
inactiveTintColor: 'white',
inactiveBackgroundColor:'green'
},
推荐阅读
- c# - 在 RDLC 表达式中,如何放置多个条件?
- mysql - MySql 中一个简单的 SELECT 查询消耗的资源
- javascript - mocha js 中的断言错误显示 - 但在异步函数中没有失败整个测试
- javascript - 有没有办法计算具有特定截止日期的猫鼬中的不同值
- oracle - 数据泵导入失败并显示“作业不存在”
- sql-server - SQL Server 数据库项目调试和发布的不同配置
- javascript - 我想要一个源代码来学习如何在我的 React Native 应用程序中使用 Redux 创建用户组?
- material-design-in-xaml - 继承的控件不继承 Material Design 风格
- angular - 在其他组件Angular中使用组件方法
- python - 显示 jinja 中字典列表中的所有值