Как разместить изображение внутри компонента «Текст»? - PullRequest
Новая
       26

Как разместить изображение внутри компонента «Текст»?

1 голос
/ 11 марта 2019

Мне нужно вставить изображение внутри текста, поэтому я делаю это самым простым способом: 

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',
 },
}

Вот результат:

enter image description here

Я не знаю, почему все изображение не находится внутри текста.Итак, я попробовал еще раз с текстом: 

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

enter image description here

Хорошо, изображение не помещается внутри строки текста.Я пробовал несколько стилей, таких как: textAlign, lineHeight.Но ничего не помогает.Есть ли способ сделать это?Изображение должно быть внутри текста: Примерно так:

enter image description here

Изображение не может проникать в пространство другой строки,И слова должны оставаться в нижней части строки.

1 Ответ

1 голос
/ 12 марта 2019

Для того, чтобы поместить изображение в текст, вам нужно поместить само изображение следующим образом: 

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