React Native Expo项目NativeBase组件两种样式写法效果差异咨询

样式效果不一致的核心原因 #

NativeBase的组件内置样式props和原生style属性的数值解析规则完全不同：

• 组件props传递的间距值会经过主题缩放
  NativeBase所有内置的间距类props（marginLeft/ml、paddingTop/pt等）的数值都会匹配主题的space规则，默认配置下，数字参数会作为倍数乘以基准间距值（默认基准为4），你写marginLeft={20}时，实际生效的margin值为 20 * 4 = 80 个React Native原生像素单位，所以视觉上缩进远大于style写法的20。
• style属性传递的数值直接生效
  通过style属性编写的样式不会经过NativeBase的主题转换，写的数值是多少就直接给React Native渲染层生效，style={{marginLeft:20}}最终就是20个原生像素单位。

对齐两种写法效果的方案 #

如果需要让props写法和style写法效果一致，可以给props传带单位的字符串，避免触发主题缩放：

// 两种写法最终marginLeft均为20原生像素
<Box style={{ marginLeft: 20 }}>
  // image here
</Box>
<Box marginLeft="20px">
  // image here
</Box>

额外规则补充：如果同时给组件传了同名的样式props和style属性，style属性的优先级更高，会覆盖组件props的样式。

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