className 不适用于使用 nativewind 样式的本机反应

Question

我正在尝试使用 className 和 nativewind stlying 在此自定义组件中设置我的图像样式，但图像没有显示，我能够在我的代码的其他部分使用 className 和 nativewind，但它似乎不是为她工作，可能是因为它是一个自定义组件，但我不确定，我是任何人都可以提供帮助。

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


const CategoryCard=({imgUrl, title})=>{
    

    return(

        <TouchableOpacity>
            <Image
                source={{
                    uri: imgUrl,
                }}

                className='h-7 w-7 bg-gray-300 p-4 rounded-full'

            />


            <Text>{title}</Text>

        </TouchableOpacity>
    )
}

export default CategoryCard

我试着查看 nativewind 文档，发现这个 https://www.nativewind.dev/guides/custom-components 可能与它有关，但我无法真正理解它，也无法理解将它应用到我自己的案例中。

Answer 1

你更新了 tailwind.config.js 了吗？它应该包括您的组件文件夹：

    /** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./App.{js,jsx,ts,tsx}",
    "./screens/**/*.{js,jsx,ts,tsx}",
    "./components/**/*.{js,jsx,ts,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
};