React Native 中的响应式图像 [英] Responsive image in React Native
问题描述
我从 Facebook API 获取了一些图像，并且我想以响应式方式显示它们，以 100% 的宽度和自动高度显示它们.问题似乎是 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:
此外，我尝试使用 react-native-auto-height-image 并将其宽度设置为屏幕宽度.
Also, I have tried to use react-native-auto-height-image and set it's width to the screen's one.
实际代码:
<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 库.
PS: Application is using Native Base as a UI library.
推荐答案
这个问题可以通过使用 paddingTop、width 和 position 轻松解决.试试下面的代码.
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>
在上面的代码中，根据所需的图像框大小更改宽度和paddingTop.
In the above code, change width and paddingTop as per the required image box size.
这篇关于React Native 中的响应式图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
