如何在 React Native 中 Text 组件的 `numberOfLines` 截断后添加内联项

Question

我想要一个以图像图标结尾的换行文本，并尝试了以下操作。

    <Text>
        <Text
            numberOfLines={2}
            ellipsizeMode="tail"
            >
            Lorem, ipsum dolor sit amet consectetur adipisicing elit. Ab quasi in dolor dolore recusandae ullam numquam labore sunt illo. Repellat in sed sit, pariatur voluptate distinctio! Perspiciatis inventore pariatur incidunt.
        </Text>
        <Image source={source} />
    </Text>

外包装

<Text />

是为了确保

<Image />

图标与文本保持内联。

我希望它看起来像下面这样：

    Lorem, ipsum dolor sit amet consectetur adipisicing elit.
    Ab quasi in dolor dolore recusandae ullam... <Image />

但是，添加外部

<Text />

似乎消除了

numberOfLines

的效果，我得到了全文：

    Lorem, ipsum dolor sit amet consectetur adipisicing elit.
    Ab quasi in dolor dolore recusandae ullam numquam labore
    sunt illo. Repellat in sed sit, pariatur voluptate
    distinctio! Perspiciatis inventore pariatur incidunt. <Image />

是否可以通过

numberOfLines

和末尾的内联

<Image />

同时实现截断？

谢谢，

Answer 1

您可以使用视图组件来解决问题

 <View style={{ flexDirection: 'row', alignItems: 'center' }}>
        <Text numberOfLines={2} ellipsizeMode="tail" style={{ flex: 1 }}>
          Lorem, ipsum dolor sit amet consectetur adipisicing elit. Ab quasi in
          dolor dolore recusandae ullam numquam labore sunt illo. Repellat in
          sed sit, pariatur voluptate distinctio! Perspiciatis inventore
          pariatur incidunt.
        </Text>
        <Image source={require('./assets/snack-icon.png')} />
      </View>