Responsive image in React Native

问题

I fetch some images from Facebook API and I want to display them responsive, to be 100% width and auto height. The problem seems to be that React Native crops my image.

I tried these solutions:

Solution 1

Solution 2

Also, I have tried to use react-native-auto-height-image and set it's width to the screen's one.

Actual code:

<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: Application is using Native Base as a UI library.

回答1:

This problem can easily solve by using paddingTop, width, and position. Just try below code.

<View style={{width:'100%',paddingTop:'100%'}}>
  <Image source={{uri:url}} style={{position:'absolute',left:0,bottom:0,right:0,top:0,resizeMode:'contain'}} />
 </View>

In the above code, change width and paddingTop as per the required image box size.

回答2:

I think that to solve this problem is simple, you could use Dimensions to set the width and height of the image with the width of the screen, like bellow:

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

来源：https://stackoverflow.com/questions/52675852/responsive-image-in-react-native

标签

reactjs

react-native

native-base