React Native中嵌套在Text组件内的Image无法垂直居中问题

这是React Native中<Image>嵌套在<Text>组件内时默认和文本基线对齐的典型问题，以下两种是经过生产环境验证的稳定修复方案： #

方案1：transform偏移调整（兼容性最优，全版本RN可用） #

直接在你现有的styles.fix代码段中添加Y轴偏移属性即可，按照你当前的图片尺寸（23*15）配合常规16号中文字体，偏移2px就可以实现垂直居中，你可以根据实际使用的字体大小微调数值：

fix: {
  transform: [{ translateY: 2 }]
}

方案2：嵌套Text容器（适配动态字号/行高场景） #

如果你的文本字号、行高是动态变化的，可以给每个<Image>外层额外套一层<Text>容器，统一设置行高后即可自适应居中：

JSX修改示例 #

<Text style={styles.baseText}>
  <Text>这是一段长文本，这里有一个图标 </Text>
  <Text style={styles.imgWrap}>
    <Image style={styles.img} source={Img} />
  </Text>
  <Text> 下一行也有 </Text>
  <Text style={styles.imgWrap}>
    <Image style={styles.img} source={Img} />
  </Text>
  <Text> 还有这里也有 </Text>
  <Text style={styles.imgWrap}>
    <Image style={styles.img} source={Img} />
  </Text>
  <Text> 但所有图标都无法和文本居中对齐。</Text>
</Text>

样式修改示例 #

const styles = StyleSheet.create({
  // 原有样式保留，新增以下样式
  baseText: {
    lineHeight: 22, // 统一设置文本行高
  },
  imgWrap: {
    lineHeight: 22, // 和外层文本行高保持一致
    textAlignVertical: 'center',
  },
  fix: {} // 原有fix的代码可以清空
});

注意：不要使用margin、相对定位的top属性调整，这两个属性在Text内嵌场景下安卓和iOS的表现差异很大，transform方案的跨端一致性最好。

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