React Native中如何实现文本末尾的内联「更多」按钮

要解决Pressable和文本无法内联的问题，核心是把Pressable嵌套到主Text组件内部，让「more」按钮成为文本流的一部分，具体修改如下：

修改后的代码 #

<View style={styles.container}>
  <Text style={styles.paragraph}>
    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 Letras
    <Pressable onPress={() => {/* 这里写点击「more」后的逻辑 */}}>
      <Text style={styles.moreText}> more</Text>
    </Pressable>
  </Text>
</View>

关键说明 #

• 把Pressable直接放到主Text组件里面，它会自动融入文本排版流，跟着最后一行文本内联显示，不会单独占一行。
• 给「more」文本前加个空格，避免和前面的文本连在一起，保证排版美观。
• 可以通过自定义样式区分可点击的「more」，比如设置不同颜色或下划线：

const styles = StyleSheet.create({
  container: {
    padding: 16,
  },
  paragraph: {
    fontSize: 16,
    lineHeight: 24,
  },
  moreText: {
    color: '#007AFF', // 用强调色区分可点击文本
    textDecorationLine: 'underline',
  },
});

为什么原来的方法不行 #

之前的结构是View下并列Text和Pressable，默认View是垂直布局（flexDirection: column），所以两者会上下排列；就算改成水平布局，长文本换行后Pressable会被挤到下一行开头，无法和文本最后一行自然衔接。嵌套进Text组件后，Pressable会作为文本的一部分参与排版，完美解决内联需求。

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