Nativewind样式不生效问题及与StyleSheet混用疑问

1. View添加text-lg样式不生效的原因及解决办法 #

React Native里View是纯布局容器，本身不处理文本渲染，text-lg这类文本样式仅对Text组件生效，而且React Native的文本样式不会从父级View继承给子Text组件，所以给外层View加text-lg完全起不到作用。

解决办法有两种：

• 直接给每个需要调整字号的Text组件添加className="text-lg"
• 若要统一设置多个子Text的样式，把外层的View换成Text组件，给这个外层Text加className="text-lg"，内部的Text会自动继承样式，代码示例：

  <Text className="text-lg" style={styles.row}>
    <View>
      <Text>text</Text>
      <Text>text</Text>
    </View>
  </Text>
  

  注意：用Text包裹View时，确保所有文本都放在Text组件内，避免出现布局异常。

2. Nativewind与StyleSheet能否同时使用？ #

完全可以，两者兼容度很高，甚至可以混合使用：

• 在组件的style属性中传入数组，同时包含Nativewind生成的样式和StyleSheet定义的样式即可，示例：

  <View className="bg-gray-100 p-2" style={[styles.row, styles.customPadding]}>
    <Text>text</Text>
    <Text>text</Text>
  </View>
  
  // 对应的StyleSheet定义
  const styles = StyleSheet.create({
    row: {
      flexDirection: 'row',
      gap: 8,
    },
    customPadding: {
      paddingVertical: 12,
    },
  });
  

• 样式优先级：如果出现样式冲突，style数组中靠后的样式会覆盖前面的。比如Nativewind的p-2和StyleSheet的customPadding冲突时，customPadding的设置会生效。

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