我应该把"tabBarOptions"放在 StackNavigator 中的什么位置？

Question

我正在使用create-react-native-app，并且正在使用带有createBottomTabNavigator函数的StackNavigator。图标正在通过单独的组件设置样式，但我在设置导航器其余部分的样式时遇到问题。

我已经创建了要使用的这些选项：

tabBarOptions: {
showLabel: false,
style: {
backgroundColor: Colors.greyGreen
}
}

希望这对某人来说非常明显，并将不胜感激！我尝试将选项放置在以下代码中的不同位置(这两个位置都不起作用(：

const config = Platform.select({
web: { headerMode: 'screen' },
default: {},
// TRIED PLACING THE OPTIONS HERE
});
const HomeStack = createStackNavigator(
{
Home: HomeScreen,
},
config
);
HomeStack.navigationOptions = {
tabBarLabel: 'Home',
tabBarIcon: ({ focused }) => (
<TabBarIcon
focused={focused}
name={
Platform.OS === 'ios'
? `ios-information-circle${focused ? '' : '-outline'}`
: 'md-information-circle'
}
/>
),
};
HomeStack.path = '';
const LinksStack = createStackNavigator(
{
Links: LinksScreen,
},
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,
},
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,
// TRIED PLACING THE OPTIONS HERE
});
tabNavigator.path = '';
export default tabNavigator;

如果您想查看图标组件：

export default function TabBarIcon(props) {
return (
<Ionicons
name={props.name}
size={26}
style={{ marginBottom: -3 }}
color={props.focused ? Colors.tabIconSelected : Colors.tabIconDefault}
/>
);
}

Answer 1

我相信它在 React Navigation 版本 5.x 中已经发生了变化。

const Tab = createBottomTabNavigator();
function MyTab() {
return (
<Tab.Navigator
tabBarOptions={{
showLabel: false
}}
>
<Tab.Screen ... />
<Tab.Screen ... />
</Tab.Navigator>
);
}

Answer 2

你应该把它放在这里，

const tabNavigator = createBottomTabNavigator({
HomeStack,
LinksStack,
SettingsStack,
},{
tabBarOptions: {
showLabel: false,
style: {
backgroundColor: Colors.greyGreen
}
}
});

希望对您有所帮助。 随意怀疑

Answer 3

底部选项卡导航器："tabBarOptions"已弃用。将选项迁移到"屏幕选项"代替。

<Tab.Navigator    
screenOptions={{
tabBarShowLabel: false,
tabBarStyle: {
backgroundColor: Colors.greyGreen
}
}}
/>