React Native Expo中NativeWind在Navigation Container内样式失效求助

1. 修正React Navigation的使用方式 #

你的代码存在错误用法：Stack.Navigator 内部只能嵌套 Stack.Screen 组件，不能直接放置 Text，这是导致样式失效的直接原因。正确写法如下：

import { createStackNavigator } from '@react-navigation/stack';

const Stack = createStackNavigator();

// 定义独立的页面组件
const HomeScreen = () => {
  return <Text className="font-extrabold">Hello</Text>;
};

// 主组件
export default function App() {
  return (
    <View style={{ flex: 1 }}>
      <Text className="font-extrabold">Hello</Text>
      <NavigationContainer>
        <Stack.Navigator>
          <Stack.Screen name="Home" component={HomeScreen} />
        </Stack.Navigator>
      </NavigationContainer>
    </View>
  );
}

2. 确保NativeWind与React Navigation的配置兼容 #

完成组件结构修正后，确认以下配置是否正确：

• Babel配置检查：打开 babel.config.js，确保NativeWind插件排在React Navigation相关插件之前：

module.exports = function (api) {
  api.cache(true);
  return {
    presets: ['babel-preset-expo'],
    plugins: [
      "nativewind/babel",
      '@babel/plugin-proposal-export-namespace-from',
    ],
  };
};

• NativeWind Provider包裹：如果使用NativeWind v3及以上版本，需确保App根组件被 NativeWindStyleSheetProvider 包裹：

import { NativeWindStyleSheetProvider } from "nativewind";

export default function App() {
  return (
    <NativeWindStyleSheetProvider>
      <View style={{ flex: 1 }}>
        {/* 你的组件内容 */}
      </View>
    </NativeWindStyleSheetProvider>
  );
}

3. 彻底清除缓存 #

若上述步骤完成后问题仍存在，执行以下操作强制刷新缓存：

• 清除Expo缓存：expo r -c
• 删除项目依赖文件后重装：

rm -rf node_modules package-lock.json
npm install

内容的提问来源于stack exchange，提问作者kylewsbm