React Native+Nativewind Web端Image组件className样式不生效问题求助

我用Expo开发React Native项目，搭配Nativewind做样式方案，同时在Android模拟器和Web端测试。以下代码在Android上能正常显示红色文本和指定尺寸的图片，但在Web端（localhost:10000），Text组件的className样式生效，Image组件的h-7 w-7样式却不生效，导致图片因无宽高无法显示。手动给Image加style属性或者换用原生<img>标签能解决问题，但不想为每张图片做平台判断，违背了用Tailwind提升开发效率的初衷。

<SafeAreaView style={{ flex: 1 }}>
  <Text className="text-red-500">HomeScreen</Text>
  {/* Header */}
  <View>
    <Image
      source={{ uri: "https://..." }}
      className="h-7 w-7"
    />
  </View>
</SafeAreaView>

解决办法 #

在根组件App.js中添加以下配置，强制Nativewind在Web端也采用Native模式输出样式：

NativeWindStyleSheet.setOutput({  
  web: "native",  
  default: "native", 
});

原理是Nativewind默认在Web端会将className转换为CSS类，但React Native的Image组件在Web端会被映射为原生img元素，默认的CSS类方式无法正确应用宽高样式。设置输出模式为native后，Tailwind样式会被转换为React Native的内联style对象，就能在Web端的Image组件上正常生效了。

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