React Native如何实现长文本第三行末尾嵌入Read More按钮

你当前采用横向flex布局将正文文本和「Read More」按钮作为两个平级组件排列，flex:1的正文组件会始终为右侧的按钮预留固定宽度的横向空间，因此前两行文本无法铺满容器宽度，这是flex布局的固有计算逻辑导致的，并非样式书写错误。

方案1：使用Text组件嵌套（推荐，原生支持、性能最优） #

React Native的Text组件支持内联嵌套子Text组件，嵌套的文本元素会跟随父文本的排版流排列，不会单独抢占横向布局空间，配合numberOfLines属性即可直接实现你要的效果：

• 文本不足3行时，「Read More」直接跟在最后一行文本末尾
• 文本超过3行时，前2行铺满整宽，第3行截断后直接拼接「Read More」按钮

实现代码如下：

const ShowReadMore = () => {
  const SOME_LONG_TEXT_BLOCK =
    'Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.';

  return (
    <Text 
      numberOfLines={3} 
      style={{ flex: 1, lineHeight: 20 /* 建议设置固定行高，避免不同机型排版偏移 */ }}
    >
      {SOME_LONG_TEXT_BLOCK}
      <Text 
        onPress={() => navigationRef.navigate('somepage')}
        style={{ color: '#1677ff' /* 可自定义按钮颜色、字号等样式 */ }}
      >
        {' '}Read More
      </Text>
    </Text>
  );
};

注意：该方案下numberOfLines会对「正文+Read More」的整体内容生效，因此按钮一定会显示在第3行末尾，不会被文本挤出截断区域。

方案2：自定义测量截断（适合高度定制场景） #

如果你需要更精准控制截断逻辑（比如自定义省略号样式、第三行剩余空间不足时动态调整正文截断长度），可以通过Text组件的onTextLayout回调获取每行的实际排版信息，手动计算正文需要截断的长度，再拼接按钮渲染。该方案实现成本更高，一般场景优先使用方案1即可。

内容的提问来源于stack exchange，提问作者S. N