React Native 0.71.3 Android端Text组件numberOfLines与textAlign兼容Bug

问题重现 #

在React Native 0.71.3中，当Text组件同时设置numberOfLines>1和textAlign='center'时，iOS端显示正常，但Android端会出现文本截断且无法居中的问题。示例代码：

<View style={{flex: 1, paddingHorizontal: 10}}>
  <Text numberOfLines={2} style={{ textAlign: 'center', color: 'black' }}>这里是需要显示的多行测试文本内容</Text>
</View>

已尝试调整布局、给父View添加renderToHardwareTextureAndroid、修改ellipsizeMode/textBreakStrategy等属性，均未解决问题。

有效解决办法 #

1. 嵌套Text组件拆分属性 #

将居中样式和行数限制分别放在内外两层Text组件上，避免Android端的布局计算冲突：

<View style={{flex: 1, paddingHorizontal: 10}}>
  <Text style={{ textAlign: 'center' }}>
    <Text numberOfLines={2} style={{ color: 'black' }}>这里是需要显示的多行测试文本内容</Text>
  </Text>
</View>

外层Text负责文本居中对齐，内层Text负责行数限制和截断逻辑，拆分后Android原生TextView的布局计算不会出现冲突。

2. 配合字体自适应属性 #

如果业务允许字体缩放，可通过adjustsFontSizeToFit和minimumFontScale让文本自动适配容器，避免截断：

<Text 
  numberOfLines={2} 
  style={{ textAlign: 'center', color: 'black' }}
  adjustsFontSizeToFit
  minimumFontScale={0.8}
>这里是需要显示的多行测试文本内容</Text>

注意：该方案会调整字体大小，需确认是否符合UI设计要求。

3. 自定义Android原生组件（进阶方案） #

如果上述方案都不满足需求，可通过自定义原生组件直接控制Android TextView的属性：

• 创建Android原生TextView，设置android:gravity="center"和android:maxLines="2"；
• 通过RN的NativeModule或TurboModule将原生组件暴露给RN使用；
• 在RN中直接使用自定义的原生组件替代默认Text组件。

这种方式彻底绕开RN层的布局计算问题，适合对UI一致性要求极高的场景。

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