如何在 Text 组件中放置图像？答案

【问题标题】：How to fit an image inside the Text component?如何在 Text 组件中放置图像？
【发布时间】：2026-01-25 11:40:01
【问题描述】：

我需要在文本中插入图片，所以我用最简单的方法来做：

const avatarurl = 'https://upload.wikimedia.org/wikipedia/commons/6/6e/Golde33443.jpg'

<ScrollView>
    <View style={styles.articleContent}>
      <View style={styles.p}>
        <Text style={{backgroundColor:'pink', width: 300, height: 100 }}>
          <Image style={{width: 300, height: 50}} source={{uri: avatarurl}}/>
        </Text>
      </View>
    </View>
</ScrollView>

const styles = {
  articleContent: {
    paddingTop: 50,
    paddingLeft: 20,
    paddingRight: 20,
    borderColor: 'red',
  },
 p: {
    paddingBottom: 15,
    flex: 1,
 },
 textCaption: {
  fontSize: 13,
  color: 'black',
 },
}

结果如下：

我不知道为什么整个图像不在文本内。所以，我又试了一次文字：

  <ScrollView>
    <View style={styles.articleContent}>
      <View style={styles.p}>
        <Text style={{backgroundColor:'pink', width: 300, height: 200}}>
          <Text style={styles.textCaption}>Well-known discrete probability distributions used in statistical modeling include</Text>
          <Image style={{width: 30, height: 30}} source={{uri: avatarurl}}/>
          <Text style={styles.textCaption}> the Poisson distribution, the Bernoulli distribution, the binomial distribution, </Text>
        </Text>
        <Text style={styles.text}>asdasd asd asd asd asd asdas das das d</Text>
      </View>
    </View>
  </ScrollView>

好的，图像不适合文本行。我尝试了一些样式，例如：textAlign、lineHeight。但没有任何帮助。有没有办法做到这一点？图像需要在文本内： 像这样：

图像不得侵占另一行的空间。并且单词需要留在行的底部。

【问题讨论】：

完全不清楚你在这里追求什么。您是否希望在句子中间内嵌显示图像？文字-图像-文字？图片顶部的文字，如果是这样，在哪里？请编辑澄清。
好多了。尝试使用display:inline; 样式的第一种方式（文本标签内的图像），或者如果您需要进一步调整位置display:inline-block。
react-native 中的样式是由 flex-box 制作的。仅显示支持Flex 或None。
*.com/questions/34624100/…

标签： image react-native text styles text-align

【解决方案1】：

为了将图像放入文本中，您必须像这样将图像本身放入；

<View>
 <Text> BIG TITLE </Text>

  <Text><Text>Caption text bla bla ajdjj </Text><Image style={{width: 30, height: 30}} source={{uri: avatarurl}}/> More Text bla blah blah blah blahhhhh </Text>

</View>

【讨论】：

同样的问题，图片侵入了另一行