React Native中如何让Text组件内嵌套View的文本换行显示？

方案1：给内层View添加块级样式 #

直接给每个嵌套在Text里的View设置display: 'block'样式，让它们独占一行：

<Text>
  <View style={{display: 'block'}}>
    <Text>Hello</Text>
  </View>
  <View style={{display: 'block'}}>
    <Text>There</Text>
  </View>
</Text>

方案2：给外层Text设置纵向flex布局 #

给外层Text添加flexDirection: 'column'样式，强制子元素纵向排列：

<Text style={{flexDirection: 'column'}}>
  <View>
    <Text>Hello</Text>
  </View>
  <View>
    <Text>There</Text>
  </View>
</Text>

方案3：调整组件渲染逻辑（替换外层Text为View） #

如果Button组件的逻辑允许，把外层的Text换成View，避免Text嵌套View的布局冲突，更符合React Native的布局规范：

<View style={/* Button容器样式 */}>
  <View>
    <Text>Hello</Text>
  </View>
  <View>
    <Text>There</Text>
  </View>
</View>

方案4：让View占满父容器宽度 #

给每个View设置width: '100%'，撑满Text的宽度后自然换行：

<Text>
  <View style={{width: '100%'}}>
    <Text>Hello</Text>
  </View>
  <View style={{width: '100%'}}>
    <Text>There</Text>
  </View>
</Text>

内容的提问来源于stack exchange，提问作者sir-haver