React Native中单个Text设numberOfLines=2时，两文本同行显示问题

问题场景 #

用flexDirection: 'row' + flexWrap: 'wrap'的View包裹两个Text组件，其中第一个Text设置了numberOfLines={2}限制行数，期望第二个Text紧跟第一个文本末尾显示，但实际第二个Text直接换行，且要求必须使用View容器，不能在外层嵌套Text组件。

解决方案 #

核心是给带行数限制的第一个Text添加flexShrink: 1样式，让它根据内容和剩余空间自适应宽度，避免抢占全部可用宽度导致后续Text换行。

完整代码示例：

import React from 'react';
import { View, Text, StyleSheet } from 'react-native';

export default function App() {
  return (
    <View style={styles.container}>
      <View style={styles.textContainer}>
        <Text 
          numberOfLines={2} 
          style={styles.limitedText}
        >
          这是一段用于测试的长文本，设置两行显示限制，看看后续文本能否正常接续。这是一段用于测试的长文本，设置两行显示限制。
        </Text>
        <Text style={styles.followText}>Something is coming after this</Text>
      </View>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    padding: 20,
  },
  textContainer: {
    flexDirection: 'row',
    flexWrap: 'wrap',
    alignItems: 'flex-start', // 保证文本顶部对齐
  },
  limitedText: {
    fontSize: 16,
    flexShrink: 1, // 关键：允许文本收缩以适配空间
    color: '#333',
  },
  followText: {
    fontSize: 16,
    color: '#e74c3c',
  },
});

原理说明 #

默认情况下，设置了numberOfLines的Text组件会默认抢占父容器的全部可用宽度，导致后续Text组件只能换行。添加flexShrink: 1后，第一个Text会根据自身内容长度和剩余空间自动调整宽度，允许内容换行到第二行，同时让第二个Text能够紧跟在第一个Text的内容末尾。

如果第一个Text的内容刚好填满两行，第二个Text会自动换行到下一行，这属于正常的布局逻辑，因为两行空间已被完全占用。

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