我如何将外部/全局样式应用于React-Navigation底部选项卡

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