材质顶部选项卡不适用于nativeWind

Question

我将

@react-navigation/material-top-tabs

与

expo-router

和

nativeWind

一起使用，但选项卡样式无法正常工作。当我从 babel.config.js 中删除 Presents 键时，顶部选项卡可以工作。

我的 babel.config.js 文件

module.exports = function (api) {
  api.cache(true);
  return {
    presets: [
      'nativewind/babel',
      ['babel-preset-expo', { jsxImportSource: 'nativewind' }]
    ],
    plugins: ['react-native-reanimated/plugin']
  };
};

Answer 1

尝试使用

@react-navigation/material-top-tabs

const Tab = createMaterialTopTabNavigator()
 <Tab.Navigator
        screenOptions={{
          tabBarActiveTintColor: 'black',
          tabBarIndicatorStyle: {
            backgroundColor: 'black',
            height: 2
          },
          tabBarScrollEnabled: true,
          tabBarLabelStyle: { fontSize: 14 },
          tabBarItemStyle: { width: 100, },
          tabBarStyle: {
            height: 46,
          },
        }}

      >
        <Tab.Screen name="HOME" component={Screen1} />
        <Tab.Screen name="SETTING" component={Screen2} />
      </Tab.Navigator>

它对我有用，希望有帮助