React native 动态更改activeTintColor
我正在使用React本机应用程序,我想根据API值更新选项卡栏上的React native 动态更改activeTintColor,react-native,React Native,我正在使用React本机应用程序,我想根据API值更新选项卡栏上的activeTintColor的颜色 我知道在我的组件中,我可以调用: static navigationOptions = { tabBarOptions: { activeTintColor: 'red' }, } 但是,要更改颜色,在我的选项卡导航器中,我将显示一个堆栈导航器,因此如果我在组件中添加上述代码,它不会更改颜色 这是我的路由器代码(请注意,我在选项卡中使用了堆栈,这就是导致问
activeTintColor
的颜色
我知道在我的组件中,我可以调用:
static navigationOptions = {
tabBarOptions: {
activeTintColor: 'red'
},
}
但是,要更改颜色,在我的选项卡导航器中,我将显示一个堆栈导航器,因此如果我在组件中添加上述代码,它不会更改颜色
这是我的路由器代码(请注意,我在选项卡中使用了堆栈,这就是导致问题的原因):
export const SpaceStack=createStackNavigator(
{
主屏幕:{
屏幕:主屏幕,
},
AlertListScreen:{
屏幕:AlertListScreen
},
图表屏幕:{
屏幕:图表屏幕
},
模拟屏幕:{
屏幕:模拟屏幕
},
选择组织屏幕:{
屏幕:选择组织屏幕
}
}
);
export const SignedIn=createBottomTabNavigator(
{
空间:{
屏幕:SpaceStack,
导航选项:{
tabBarLabel:“空格”,
tabBarIcon:({focused,tintColor})=>(
专注?:
),
}
},
警报:{
屏幕:createStackNavigator({
警报:{
屏幕:AlertListScreen
}
}),
导航选项:{
标题:“警报”,
tabBarLabel:“警报”,
tabBarIcon:({focused,tintColor})=>(
专注?:
),
}
},
设置:{
屏幕:设置屏幕,
导航选项:{
tabBarLabel:“设置”,
tabBarIcon:({focused,tintColor})=>(
专注?:
),
}
},
},
{
选项卡选项:{
activeTintColor:global.brandColor,
标签样式:{fontFamily:FontMedium,},
}
}
);
有人知道我如何改变这个吗?试试这个
//Some.js
import {connect} from 'react-redux';
let renderTabs = ({tintColor})=>{
return createBottomTabNavigator({//route configs},{tabBarOptions: {
activeTintColor: tintColor,
labelStyle: { fontFamily: FontMedium, },
}}
export default connect(null,renderTabs);
然后,您可以发送一个操作来更改您的tintColor
您可以在react Navigation中使用它们
在导航器的静态配置选项中指定的颜色现在可以指定为具有明暗键的对象:
示例
const ThemeContext=React.createContext(null);
常数次常数={
灯光:{
背景颜色:“#fff”,
fontColor:“#000”,
},
黑暗:{
背景颜色:“#000”,
fontColor:“#fff”,
},
};
let Tabs=createBottomTabNavigator(
{
/*路线*/
},
{
选项卡选项:{
activeTintColor:ThemeConstants[theme]。activeTintColor,
InactiveIntColor:ThemeConstants[theme]。InactiveIntColor,
},
}
);
请参见如果您使用redux,您可以非常轻松地执行此操作!
//Some.js
import {connect} from 'react-redux';
let renderTabs = ({tintColor})=>{
return createBottomTabNavigator({//route configs},{tabBarOptions: {
activeTintColor: tintColor,
labelStyle: { fontFamily: FontMedium, },
}}
export default connect(null,renderTabs);