我从 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 库。
最佳答案
这个问题可以通过使用paddingTop、width、position轻松解决。只需尝试下面的代码即可。
<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。
关于reactjs - React Native 中的响应式图像，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/52675852/