React Native如何让Text组件宽度适配内容而非默认100%？

你遇到的这个问题是因为React Native里的ScrollView默认alignItems属性为stretch，会把内部子元素强制拉伸到容器的整个宽度，所以你的Text才会铺满ScrollView的宽度。

想要让Text宽度仅适配文本内容，有两个简单直接的方案：

• 直接给Text设置alignSelf：让Text脱离父容器的拉伸规则，自主适配内容宽度：

  <ScrollView style={{/* padding, centering... */}}>
    <Text style={{ alignSelf: 'flex-start' }}>SHARE WITH YOU FRIENDS</Text>
  </ScrollView>
  

  如果需要文本居中显示，把alignSelf改成center即可；想要靠右显示就用flex-end。

• 给Text包裹一个View容器：如果后续有额外布局需求，比如给文本加背景、边距，可以把Text放在View里，调整View的对齐逻辑：

  <ScrollView style={{/* padding, centering... */}}>
    <View style={{ alignItems: 'flex-start' }}>
      <Text>SHARE WITH YOU FRIENDS</Text>
    </View>
  </ScrollView>
  

  这种方式不会影响ScrollView里的其他元素，扩展性更强。

两种方案都能实现Text宽度自动适配内容的效果，不会再铺满整个容器啦～

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