React Native View包裹两个Text组件时文本无法换行问题求助

DevOps 小满

2026-9-24

问题根因

你遇到的文本截断问题是两层样式冲突导致的：

最外层screen样式设置了flexDirection: row，导致内部的ScrollView宽度没有占满设备屏幕，所有子组件的可用宽度被压缩
横向排列的容器AvailabilityWrapper中，长文本的Text组件没有被限制最大宽度，内容超出容器宽度后默认被截断，不会自动换行

可行解决方案

第一步：修正最外层容器样式

修改styles.screen的配置，移除错误的横向布局配置：

screen: {
  flex: 1,
  paddingVertical : 5,
  paddingHorizontal : 5
  // 删掉原来的 alignItems: 'center'、flexDirection:'row' 两个属性
},

第二步：给长文本组件添加宽度限制，二选一即可：

方案A：直接给长文本加`flexShrink: 1`属性

<View style={styles.AvailabilityWrapper}>
  <Text>Availability : </Text>
  <Text style={[styles.availability_10, {flexShrink: 1}]}>This product will be available again on December 24</Text>
</View>

方案B：给长文本套一层带`flex: 1`的父容器

<View style={styles.AvailabilityWrapper}>
  <Text>Availability : </Text>
  <View style={{flex: 1}}>
    <Text style={styles.availability_10}>This product will be available again on December 24</Text>
  </View>
</View>