React Native嵌套文本垂直对齐异常问题（仅Android端）

问题出在你用View包裹高亮文本，导致Android端中文本组件和视图组件的垂直基线对齐逻辑不一致——iOS的文本渲染机制对这种混合组件的兼容性更好，所以没有出现对齐问题。

直接用Text嵌套Text就能解决问题，同时保留borderRadius和高亮样式，无需额外的View：

修改后的代码：

class App extends Component {
  render() {
    return (
      <View style={styles.container}>
        <Text style={styles.textContainer}>
          <Text style={styles.textHighlighting}>
            Testing
          </Text>
          .
        </Text>
        <Text style={styles.textContainer}>
          <Text style={styles.textHighlighting}>
            Again
          </Text>
          !
        </Text>
      </View>
    )
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: "#fff",
    alignItems: "center",
    justifyContent: "center",
  },
  textContainer: {
    fontSize: 50
  },
  textHighlighting: {
    backgroundColor: "yellow",
    borderRadius: 10,
    fontSize: 50,
    // 可选：添加少量内边距让高亮背景更贴合文本
    paddingHorizontal: 4,
    paddingVertical: 2
  }
})

关键说明： #

• React Native的Text组件支持内部嵌套Text，所有嵌套的Text都会遵循文本基线对齐规则，Android和iOS表现一致。
• Text组件本身支持backgroundColor和borderRadius样式，无需用View包裹来实现高亮效果。
• 统一父文本和高亮文本的fontSize，并可通过微调padding优化高亮背景的显示效果，避免背景与文本错位。

若之前直接嵌套Text时样式失效，大概率是样式冲突或写法错误，比如未正确继承父文本字号、设置了影响布局的额外样式。

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