更改反应本机选项卡栏的背景颜色

Question

所以我对原生和移动开发的反应真的很陌生， 我想更改底部选项卡栏导航的背景颜色，但我似乎不知道该怎么做，因为我从一个带有导航的 React 本机项目开始(博览会初始化阶段的选项(，东西的编写方式与我在网上看到的不同我知道我需要添加

tabBarOptions: {
style: { backgroundColor: 'orange'}
}

但说实话，idk 到底在哪里，如果有人能帮忙，将不胜感激！ 这是我的代码：

import React from 'react';
import { Platform } from 'react-native';
import { createStackNavigator } from 'react-navigation-stack';
import { createBottomTabNavigator } from 'react-navigation-tabs';
import TabBarIcon from '../components/TabBarIcon';
import HomeScreen from '../screens/HomeScreen';
import LinksScreen from '../screens/LinksScreen';
import SettingsScreen from '../screens/SettingsScreen';

const config = Platform.select({
web: { headerMode: 'screen' },
default: {},
});
const HomeStack = createStackNavigator(
{
Home: HomeScreen,
},{
defaultNavigationOptions: {
headerTintColor: '#444',
headerStyle: {
backgroundColor: 'pink'
}
}
},
config
);
HomeStack.navigationOptions = {
tabBarLabel: 'Home',
tabBarIcon: ({ focused, tintColor }) => (
<TabBarIcon
focused={focused}
name={
Platform.OS === 'ios'
? `ios-information-circle${focused ? '' : '-outline'}`
: 'md-information-circle'
}
color= {"#cd077dr"}
/>
), style: {
backgroundColor: 'pink'
}
};
HomeStack.path = '';
const LinksStack = createStackNavigator(
{
Links: LinksScreen,
},{
defaultNavigationOptions: {
headerTintColor: '#444',
headerStyle: {
backgroundColor: 'pink'
}
}
},
config
);
LinksStack.navigationOptions = {
tabBarLabel: 'Links',
tabBarIcon: ({ focused }) => (
<TabBarIcon focused={focused} name={Platform.OS === 'ios' ? 'ios-link' : 'md-link'} />
)
};
LinksStack.path = '';
const SettingsStack = createStackNavigator(
{
Settings: SettingsScreen,
},{
defaultNavigationOptions: {
headerTintColor: '#444',
headerStyle: {
backgroundColor: 'pink'
},
tabBarOptions: {
style: { backgroundColor: 'orange'}
}
}
},
config
);
SettingsStack.navigationOptions = {
tabBarLabel: 'Settings',
tabBarIcon: ({ focused }) => (
<TabBarIcon focused={focused} name={Platform.OS === 'ios' ? 'ios-options' : 'md-options'} />
),
};
SettingsStack.path = '';

const tabNavigator = createBottomTabNavigator({
HomeStack,
LinksStack,
SettingsStack,
});
tabNavigator.path = '';
export default tabNavigator;

Answer 1

将其用于 React Navigation 版本 6.x

screenOptions={{
tabBarStyle: {
backgroundColor: '#00bcd4',
},
}}

Answer 2

我认为您应该将const tabNavigator编辑为类似

const tabNavigator = createBottomTabNavigator({
HomeStack,
LinksStack,
SettingsStack,
}, {
defaultNavigationOptions: {
tabBarOptions: {
style: { backgroundColor: 'orange'}
}
}
});

Answer 3

@Zelda请参考此链接(react-native-tab-view git-hub问题(。

https://github.com/react-native-community/react-native-tab-view/issues/152

Answer 4

尝试使用它，它适用于Android和iOS https://github.com/react-navigation/react-navigation/issues/1270#issuecomment-342757336

const tabBarOptions = {
// setting height 'null', and top 0 will change the color of pressed tab
indicatorStyle: {
height: null,
top: 0,
backgroundColor: "red",
borderBottomColor: "black",
borderBottomWidth: 3,
},
activeTintColor: "black",
pressColor: "white",
style: {
backgroundColor: "#ddc8be",
},
labelStyle: { fontSize: 13 },
};

Answer 5

TabbarOptions props 包含一个 tabStyle 属性，可帮助您根据需要设置选项卡样式

const tabBarOPtions = {
tabStyle: [{backgroundColor: 'red'}]
}