使用nativewind嵌套View时左侧出现异常padding问题求助

问题说明 #

使用NativeWind 2.0.11开发时，嵌套的flex-row布局View中，左侧的"+"文本出现异常左padding，导致布局偏移不符合预期。

复现代码：

<View className="flex-col items-center justify-center flex-grow gap-2 bg-blue-400">
    <View className="flex-row justify-between w-1/2 gap-2 bg-red-400 ">
        <Text>+</Text>
        <Text>4</Text>
        <Text>-</Text>
    </View>
</View>

修复方案 #

试试以下几种解决办法：

1. 重置Text组件默认样式
   React Native的Text组件自带默认内外边距，给所有Text添加p-0 m-0重置样式：

<View className="flex-col items-center justify-center flex-grow gap-2 bg-blue-400">
    <View className="flex-row justify-between w-1/2 gap-2 bg-red-400">
        <Text className="p-0 m-0">+</Text>
        <Text className="p-0 m-0">4</Text>
        <Text className="p-0 m-0">-</Text>
    </View>
</View>

2. 清除内层View的左padding
   给内层flex-row View添加pl-0类，强制设置左padding为0：

<View className="flex-col items-center justify-center flex-grow gap-2 bg-blue-400">
    <View className="flex-row justify-between w-1/2 gap-2 bg-red-400 pl-0">
        <Text>+</Text>
        <Text>4</Text>
        <Text>-</Text>
    </View>
</View>

3. 升级NativeWind版本
   2.0.11属于较早版本，可能存在已知样式bug，升级到最新稳定版可避免不少兼容性问题。

4. 检查全局样式配置
   查看tailwind.config.js，确认是否有全局注入的padding样式影响了View或Text组件，比如content或theme里的默认间距设置。

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