如何让文本在React Native容器中正确适配并自动换行？

嘿，我完全懂你这个困扰！在React Native的flex布局里，文本放在flexDirection: 'row'的容器里时，很容易出现超出边界的情况——这是因为默认情况下，Text组件不会主动收缩换行来适应可用空间。咱们来一步步修复这个问题：

核心问题分析 #

你的代码里，那些包含长文本的View都设置了flexDirection: 'row'，但没有开启换行支持；同时长文本的Text组件也没有配置来占据剩余空间并自动换行，所以它会一直横向延伸超出容器。

具体修复方案 #

我们需要给两个地方做调整：

• 给每个包含文本的row容器添加flexWrap: 'wrap'，允许内容在空间不足时换行
• 给长文本的Text组件设置flex: 1（或者flexShrink: 1），让它能占据剩余可用空间并自动换行；同时给左侧的标签文本设置flexShrink: 0，防止标签被压缩变形

修改后的代码片段如下：

<Card style={{ backgroundColor: 'rgba(255,255,255,5)', elevation: 2 }} shadow>
  <View style={{ flexDirection: 'row', backgroundColor: 'white' }}>
    <View style={{ backgroundColor: 'white' }}>
      <Avatar size="large" rounded icon={{ name: 'home' }} source={{ uri: 'http://imageurl' }} />
    </View>
    <View style={{ paddingHorizontal: 20, flex: 1 }} activeOpacity={.5}>
      {/* 第一个文本行 */}
      <View style={{ flexDirection: 'row', flexWrap: 'wrap', alignItems: 'flex-start', marginBottom: 10 }}>
        <Text style={{ fontFamily: 'AsapCondensed-Bold', fontSize: 16, color: colors.primary, flexShrink: 0 }}>LABEL: </Text>
        <Text style={{ fontSize: 16, paddingLeft: 5, color: colors.black, flex: 1 }}>adasdasd asdasd asdasdsad asdasdsad SOME LONG TEXT!! asdasdsad</Text>
      </View>
      {/* 第二个文本行 */}
      <View style={{ flexDirection: 'row', marginBottom: 10 }}>
        <Text style={{ fontFamily: 'AsapCondensed-Bold', fontSize: 16, color: colors.black }}>Ort. Puan: </Text>
        <Text style={{ fontSize: 16, paddingLeft: 5, color: colors.black }}>4.2 </Text>
      </View>
      {/* 第三个文本行 */}
      <View style={{ flexDirection: 'row', flexWrap: 'wrap', alignItems: 'flex-start' }}>
        <Text style={{ fontFamily: 'AsapCondensed-Bold', fontSize: 16, color: colors.black, flexShrink: 0 }}>Adres: </Text>
        <Text style={{ fontSize: 16, paddingLeft: 5, color: colors.black, flex: 1 }}>Ayaş yolu Bulvarı, Sincan asdasd SOME LONG TEXT!! </Text>
      </View>
    </View>
  </View>
</Card>

额外优化点 #

我还给外层的文本容器（就是那个paddingHorizontal:20的View）加了flex:1，确保它能占据Avatar之外的所有剩余空间，这样文本的可用宽度会更合理。

这样调整后，所有长文本都会自动在容器边界内换行，不会再超出范围啦！

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