文章/答案/技术大牛

发布

社区首页 >问答首页 >如何在文本组件中匹配图像？

问如何在文本组件中匹配图像？
EN

Stack Overflow用户

提问于 2019-03-11 16:48:51

回答 1查看 189关注 0票数 1

我需要在文本中插入一个图像，所以，我用最简单的方法：

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。但什么都帮不上忙。有办法这样做吗？图像需要在文本中：，如：

图像可能不会侵入另一行的空间。而单词则需要保持在最下面。

image

react-native

text

styles

text-align

回答 1

Stack Overflow用户

发布于 2019-03-12 03:00:00

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

<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>

票数 1

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/55106658

复制

相似问题

问如何在文本组件中匹配图像？
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何在文本组件中匹配图像？EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何在文本组件中匹配图像？
EN