React Native中如何实现两元素同行并设置对齐与间距？

在React Native中，<Text>组件的子元素确实会忽略margin这类布局属性，而且嵌套Text更适合文本混排场景，并不适配你这种需要精准对齐的布局需求。换成<View>作为容器，利用Flexbox就能轻松实现目标效果：

1. 外层View设置flexDirection: 'row'让元素横向排列，alignItems: 'center'保证元素垂直居中
2. 图标默认左对齐，无需额外设置
3. 文字所在的<Text>设置flex: 1，占据图标之外的所有剩余宽度，再通过textAlign: 'center'让文字在该区域内居中

修改后的代码示例：

<View style={{ flexDirection: 'row', alignItems: 'center' }}>
  <Feather 
    name="chevron-left" 
    size={24} 
    onPress={() => props.navigation.goBack()} 
  />
  <Text style={{ flex: 1, textAlign: 'center' }}>
    {this.props.client.name}
  </Text>
</View>

如果需要给图标和文字之间增加额外间距，直接给图标添加marginRight即可：

<Feather 
  name="chevron-left" 
  size={24} 
  style={{ marginRight: 16 }}
  onPress={() => props.navigation.goBack()} 
/>

这种方式基于React Native标准布局系统，没有样式限制，能精准实现你需要的图标左对齐、文字居中的效果。

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