使用NativeWind为React Native视图设置样式失效问题求助

我是Expo React Native开发新手，跟着在线教程练习时，创建的自定义InputField组件样式完全不生效，实际效果和教程差距很大，反复核对步骤也找不到问题，希望得到帮助。

当前输入框效果：

自定义InputField组件代码 #

import { Image, KeyboardAvoidingView, Text, TextInput, TouchableWithoutFeedback, View } from "react-native";

const InputField = ({
label, labelStyle, icon, secureTextEntry = false, containerStyle, inputStyle, 
iconStyle, className, ...props
}) => (

<KeyboardAvoidingView>
    <TouchableWithoutFeedback>
        <View className='my-2 w-full'>
            <Text className={`text-lg font-JakartaBold mb-3 ${labelStyle}`}>{label}</Text>
            <View className={`flex flex-row justify-start items-center relative
                bg-neutral-100 rounded-full border border-neutral-100
                focus:border-primary-500 ${containerStyle}`}>

                    {icon && (<Image source={icon} className={`w-2 h-2 ml-4 ${iconStyle}`} />
                )}

                <TextInput className= {`rounded-full p-4 font-JakartaSemiBold text-[15px]
                    flex-1 ${inputStyle} text-left`} 
                    secureTextEntry= {secureTextEntry}
                    {...props}
                    />

            </View>
        </View>
    </TouchableWithoutFeedback>
</KeyboardAvoidingView>

)

export default InputField;

注册页面代码 #

import { View, Text, SafeAreaView, ScrollView, Image } from 'react-native'
import React, { useState } from 'react'
import { icons, images } from '@/constants'
import InputField from '@/component/InputField'


const signIn = () => {
 const [form, setForm] = useState({
name: '',
email: '',
password: '',
})
return (
<ScrollView className='flex-1 bg-white'>
  <View className='flex-1 bg-white'>
    <View className='relative w-full h-[250px]'>
      <Image className='z-0 w-full h-[250px]'
       source={images.signUpCar}  />
      <Text className='text-2xl text-black font-jakartaSemibold absolute 
      bottom-5 left-5'>create a new account</Text>
    </View>

    <View className='p-5'>
     <InputField 

     label = 'Name'
     placeholder = 'Enter your name'
     icon={icons.person}
     value={form.name}
     onChangeText={(value) => setForm({... form, name: value,})}
     />

    </View>
  </View>
</ScrollView>
 )
}

export default signIn

问题原因及修复方案 #

1. 核心问题：未配置Tailwind CSS支持

你代码中使用的className类名（如my-2、flex-row）是Tailwind语法，但Expo React Native默认不支持，必须通过nativewind插件配置才能生效，这是样式失效的主要原因。

配置步骤：

• 安装依赖：

  npm install nativewind tailwindcss
  

• 初始化Tailwind配置文件：

  npx tailwindcss init
  

• 修改tailwind.config.js，添加文件路径和自定义主题：

  /** @type {import('tailwindcss').Config} */
  module.exports = {
    content: [
      "./App.{js,jsx,ts,tsx}",
      "./components/**/*.{js,jsx,ts,tsx}",
      "./screens/**/*.{js,jsx,ts,tsx}"
    ],
    theme: {
      extend: {
        fontFamily: {
          JakartaBold: ['JakartaBold', 'sans-serif'],
          JakartaSemiBold: ['JakartaSemiBold', 'sans-serif']
        },
        colors: {
          primary: {
            500: '#你的主色值'
          },
          neutral: {
            100: '#你的中性色值'
          }
        }
      },
    },
    plugins: [],
  }
  

• 修改babel.config.js添加nativewind插件：

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

2. 组件逻辑修复

• 移除无效的TouchableWithoutFeedback：当前组件中该标签没有绑定任何事件，会导致输入框无法获取焦点，若需要点击空白处关闭键盘，需补充逻辑：

  // 导入Keyboard和Platform
  import { Image, KeyboardAvoidingView, Text, TextInput, TouchableWithoutFeedback, View, Keyboard, Platform } from "react-native";
  import { useState } from 'react';
  
  const InputField = ({
    label, labelStyle, icon, secureTextEntry = false, containerStyle, inputStyle, 
    iconStyle, className, ...props
  }) => {
    const [isFocused, setIsFocused] = useState(false);
    
    return (
      <TouchableWithoutFeedback onPress={Keyboard.dismiss}>
        <KeyboardAvoidingView behavior={Platform.OS === 'ios' ? 'padding' : 'height'}>
          <View className='my-2 w-full'>
            <Text className={`text-lg font-JakartaBold mb-3 ${labelStyle}`}>{label}</Text>
            {/* 用state管理焦点状态，替代Tailwind伪类 */}
            <View className={`flex flex-row justify-start items-center relative
                bg-neutral-100 rounded-full border ${isFocused ? 'border-primary-500' : 'border-neutral-100'}
                ${containerStyle}`}>
              {icon && (<Image source={icon} className={`w-6 h-6 ml-4 ${iconStyle}`} />)}
              <TextInput 
                className={`rounded-full p-4 font-JakartaSemiBold text-[15px] flex-1 ${inputStyle} text-left`} 
                secureTextEntry={secureTextEntry}
                onFocus={() => setIsFocused(true)}
                onBlur={() => setIsFocused(false)}
                {...props}
              />
            </View>
          </View>
        </KeyboardAvoidingView>
      </TouchableWithoutFeedback>
    )
  }
  

• 调整图标大小：原代码中w-2 h-2尺寸过小，改为w-6 h-6更符合常规输入框图标大小。

3. 路径验证

确保@/constants、@/component的路径配置正确，可在jsconfig.json或tsconfig.json中配置baseUrl：

{
  "compilerOptions": {
    "baseUrl": "."
  }
}

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