React Native iOS端内联样式与属性失效问题求助

最近开发React Native跨平台应用时踩了个实打实的坑：同样的布局属性，Android端显示完全正常，到了iOS端却直接“罢工”，折腾了好一阵才理清原因，分享给大家避坑！

问题重现 #

我一开始直接在Native Base的Button组件标签上写内联属性，比如：

<Button 
  style={principal_style.botoes} 
  backgroundColor='#e3e3e3' 
  onPress={() => this.logaUser() }>
  <Text style={principal_style.btntxtstylewhite}>{this.state.txtEntrar}</Text>
</Button>

结果iOS端完全忽略了backgroundColor属性，包括width、height这类直接写在组件上的样式属性都没用。后来我把属性移到style prop里，还是不行：

<View style={{flex: 1, justifyContent: 'center', }}>
  <Text style={{color:'#ffffff', fontSize:12, textAlign: 'center', marginTop: 20,}}>V - 0.02</Text>
</View>

但用外部StyleSheet定义的样式却完全正常，比如：

const principal_style = StyleSheet.create({
  botoes: {
    flex: 2,
    backgroundColor: 'blue',
    height:70,
    flexDirection: 'row',
    justifyContent: 'center',
    alignItems: 'center',
    marginLeft: 40,
    marginRight: 40,
    borderRadius: 20,
    marginBottom: 20
  }
})

排查与解决过程 #

1. 内联样式的正确打开方式：一开始误以为iOS不支持内联样式，后来试了用数组语法合并外部样式和内联覆盖样式：

<TouchableHighlight style={[styles.button,{ backgroundColor: '#f00'}]}>
  {/* 子组件内容 */}
</TouchableHighlight>

这解决了部分样式失效的问题，但又出现新状况——文本消失了。
2. flex与高度的冲突排查：仔细检查后发现是flex属性和固定height设置冲突，导致布局计算异常，修正这个冲突后，所有功能终于恢复正常。

关键结论 #

• 对于Native Base这类第三方UI组件，别直接在组件标签上写内联样式属性（比如backgroundColor='#e3e3e3'这种写法），必须通过style prop传入。
• 跨平台覆盖外部StyleSheet样式时，正确写法是用数组合并：style={[外部样式对象, 内联覆盖样式对象]}，这样Android和iOS都能正常识别。
• 要注意flex布局和固定尺寸的冲突，避免因布局计算异常导致内容消失或样式失效。

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