Карточка React-Native-Elements не показывает полное изображение

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

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

вот код моей карты:

<Card
image={{uri: 'https://i2-prod.mirror.co.uk/incoming/article14334083.ece/ALTERNATES/s615/3_Beautiful-girl-with-a-gentle-smile.jpg'}}
containerStyle={{borderRadius:10, marginRight:1, marginLeft:1,}}>
<View
    style={{ flex: 1, flexDirection: 'row', justifyContent: 'space-between' }}
  >
  <View style={{ flexDirection: 'row'}}>
    <Avatar 
        size="small"
        rounded
        source={{
    uri:
      'https://i2-prod.mirror.co.uk/incoming/article14334083.ece/ALTERNATES/s615/3_Beautiful-girl-with-a-gentle-smile.jpg',
  }}
  />
    <Text>Name</Text>
    </View>
    <View>
    <Text>Date</Text>
    </View>
  </View>
    <Text>Caption of image</Text>
</Card>

проблема в

image={{uri: 'https://i2-prod.mirror.co.uk/incoming/article14334083.ece/ALTERNATES/s615/3_Beautiful-girl-with-a-gentle-smile.jpg'}}
containerStyle={{borderRadius:10, marginRight:1, marginLeft:1,}}

это изображение, которое перекрывает границы карты и не отображается на 100%.


react-native image react-native-elements
person Frank Gully    schedule 06.08.2019    source источник
comment
Стиль Аватара width: "100%", height:"100%"   -  person hong developer    schedule 06.08.2019
comment
Извините, то, как я написал вопрос, должно быть, сбивает с толку. Я отредактирую это. Проблема в image={{uri: 'https://i2-prod.mirror.co.uk/incoming/article14334083.ece/ALTERNATES/s615/3_Beautiful-girl-with-a-gentle-smile.jpg'}} containerStyle={{borderRadius:10, marginRight:1, marginLeft:1,}}   -  person Frank Gully    schedule 06.08.2019

Ответы (1)


arrow_upward
0
arrow_downward

Попробуй добавить этот реквизит к тебе Card:

<Card
  image={{uri: 'https://i2-prod.mirror.co.uk/incoming/article14334083.ece/ALTERNATES/s615/3_Beautiful-girl-with-a-gentle-smile.jpg'}}
  imageStyle={{
    width: '200px,
    height: '200px',
   resizeMode: 'cover'
  }}
...
>

Попробуйте указать точную ширину и высоту, см. пример выше.

person gran33    schedule 06.08.2019