Блог

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

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

#react-native #react-native-image #react-native-elements

#react-native #react-native-image #react-native-elements

Вопрос:

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

Как я понимаю, для компонента изображения требуются реквизиты height / width. Но его настройка не сделает его отзывчивым. Я пробовал несколько вещей с 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>

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

Комментарии:

1. <Стиль представления={{flex:1}}> <Карта> <Стиль изображения= {{ ширина: 30, высота: 30 }} источник ={{uri:’ gettyimages.in/gi-resources/images/frontdoor/creative /… ‘}} /> <Просмотр><Текст> Заголовок изображения </Text> </View> </Card> </View > используйте это

2. Вы знаете ширину карты?

3. по умолчанию оно использует полную ширину, и вы также можете указать ширину в стиле

Ответ №1:

У вас есть два варианта: либо использовать тег ImageBackground с ResizeMode=»cover» вместо тега View, либо использовать ResizeMode =»cover» внутри тега image.

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

Ответ №2:

После попытки некоторых действий кажется, что я пропустил реквизиты компонента карты с реагирующим элементом.

В react-native-element есть реквизит изображения, который выполняет все, что требуется.

Для тех, кто может счесть это полезным, это то, что я сделал, наконец

 <Card image={{uri: "url-of-the-image.png"}}>
  <View>
    <Text style={styles.tag}>{tags}</Text>
    <Text style={styles.title}>{title}</Text>
  </View>
</Card>