React Native中使用NativeWind时className在自定义组件不生效

你的代码里存在两个核心问题：

• Image组件的p-4样式会完全挤压图片显示区域：h-7 w-7对应宽高28px，而p-4是16px的内边距，四个方向的内边距叠加后，图片的实际可显示区域为负数，直接导致图片无法显示。
• 你想要的灰色背景、圆角、内边距效果，应该用外层容器实现，而非直接加在Image上——Image的padding是作用于图片内容本身，不是用来实现容器样式的。

修改后的代码如下：

import { View, Text, TouchableOpacity, Image } from 'react-native'
import React from 'react'

const CategoryCard = ({ imgUrl, title }) => {
    return (
        <TouchableOpacity>
            {/* 用View做容器实现背景、圆角和内边距 */}
            <View className='bg-gray-300 p-4 rounded-full'>
                <Image
                    source={{ uri: imgUrl }}
                    className='h-7 w-7'
                />
            </View>
            <Text>{title}</Text>
        </TouchableOpacity>
    )
}

export default CategoryCard

另外补充NativeWind自定义组件的基础处理逻辑：如果要封装原生组件并支持NativeWind样式，只需把className props传递给内部的原生组件即可。比如封装一个可自定义样式的Image组件：

const StyledImage = ({ className, ...props }) => (
    <Image className={className} {...props} />
)

这样使用StyledImage时就能正常传递NativeWind的className样式。

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