Изображение не отображается или не покрывает всю доступную область представления в компоненте карты реактивного элемента - PullRequest
Новая
       23

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

0 голосов
/ 12 апреля 2019

Я хочу настроить карту из Reaction-native-Elements, у которой есть изображение и название карты. Я хочу, чтобы изображение занимало всю ширину, доступную на виде, и регулировало высоту, сохраняя соотношение сторон. Так что в принципе у меня нет ни высоты, ни ширины.

Как я понимаю, для компонента Image требуется высота / ширина реквизита. Но его настройка не сделает его отзывчивым. Я пробовал несколько вещей с Flex, но он не работает 

<Card>
 <Image
    style={{
    flex: 1,
    alignSelf: 'stretch',
    width: null,
    height: null
  }}
    resizeMode="contain"
    source={{
    uri: "url-of-the-image.png"
  }}/>
  <View>
    <Text>Image Title</Text>
  </View>
</Card>

Изображение не отображается

Ответы [ 2 ]

0 голосов
/ 12 апреля 2019

После того, как я попробовал кое-что, кажется, что я пропустил подпорки компонента карты реактивного элемента.

В реактивном элементе реакции есть изображение, которое делает все эточто требуется.

Для кого-то, кто может найти это полезным, вот что я наконец-то сделал 

<Card image={{uri: "url-of-the-image.png"}}>
  <View>
    <Text style={styles.tag}>{tags}</Text>
    <Text style={styles.title}>{title}</Text>
  </View>
</Card>
0 голосов
/ 12 апреля 2019

У вас есть два варианта: либо использовать тег ImageBackground с resizeMode = "cover" вместо тега View, либо использовать resizeMode = "cover" внутри тега изображения.

Это должно решить вашу проблему.

...