如何将外部/全局样式应用于反应导航底部选项卡

Question

我尝试在react-native中应用全局样式到底部选项卡导航，但它不能在screenOptions prop中接受它。但是当我使用普通的内联样式时，它工作得很好。请帮助

export default function CustomBottomTab() {
return (
<Tab.Navigator
screenOptions={{
tabBarStyle: {styles.customTab} //underlines the dot as an error
}}
>
<Tab.Screen
name='Landing'
component={HomeScreen}
options={{
tabBarIcon: (props) => <AntDesign name='home' size={20} {...props} />,
}}
/>
<Tab.Screen
name='Notifications'
component={NotifScreen}
options={{
tabBarIcon: (props) => (
<FontAwesome5 name='bell' size={20} {...props} />
),
}}
/>
<Tab.Screen
name='Wishlist'
component={WishScreen}
options={{
tabBarIcon: (props) => (
<Ionicons name='bookmarks-outline' size={20} {...props} />
),
}}
/>
<Tab.Screen
name='Messages'
component={MessagesScreen}
options={{
tabBarIcon: (props) => (
<FontAwesome5 name='comment' size={20} {...props} />
),
}}
/>
</Tab.Navigator>
);
}

Answer 1

将{}从{styles.customTab}周围移除。这是无效的JavaScript语法。

必须是:

tabBarStyle: styles.customTab