Адаптивное изображение в React Native - PullRequest
Новая
       5

Адаптивное изображение в React Native

0 голосов
/ 06 октября 2018

Я получаю некоторые изображения из Facebook API и хочу, чтобы они отображались быстро, с шириной 100% и автоматической высотой.Кажется, проблема в том, что React Native обрезает мое изображение.

Я пробовал следующие решения:

Решение 1

Решение 2

Кроме того, я попытался использовать response-native-auto-height-image и установить его ширину равной ширине экрана.

Фактический код: 

<TouchableOpacity onPress={() => Linking.openURL(post.url)}>
      <Card style={{ flex: 1 }}>
        <CardItem>
          <Left>
            <Thumbnail source={ThumbnailImage} />
            <Body>
              <Text>My text</Text>
              <Text note>{createdTime}</Text>
            </Body>
          </Left>
        </CardItem>
        <CardItem>
          <Body>
            <AutoHeightImage
              width={Dimensions.get('window').width - 35}
              source={{ uri: post.media.image.src }}
            />
            <Text style={{ marginTop: 10 }}>{post.description}</Text>
          </Body>
        </CardItem>
      </Card>
    </TouchableOpacity>

PS: приложение использует Native Base в качестве библиотеки пользовательского интерфейса.

1 Ответ

0 голосов
/ 06 октября 2018

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

import { Image, Dimensions } from 'react-native';

var screenWidth = Dimensions.get('window').width;

<View>
    <Image source={...} style={{ width: screenWidth, height: screenWidth }} />
</View>

https://snack.expo.io/ryuCvY8cX

...