Question

我从Facebook API中获取了一些图像，并且希望以100％的宽度和自动高度将它们显示为响应式。问题似乎是React Native裁剪了我的图像。

我尝试了以下解决方案：

此外，我尝试使用react-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作为UI库。

Answer 1

使用paddingTop，宽度和位置可以轻松解决此问题。只需尝试下面的代码即可。

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

在上面的代码中，根据所需的图像框大小更改width和paddingTop。

Answer 2

我认为要解决此问题很简单，您可以使用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

React Native中的响应式图像

2 个答案: