我从 Facebook API 获取一些图像,我想将它们显示为响应式,宽度为 100%,高度为自动。问题似乎是 React Native 裁剪了我的图像。
我尝试了这些解决方案:
解决方案1 https://stackoverflow.com/a/39632332/9138736
解决方案2 https://stackoverflow.com/a/42170351/9138736
另外,我尝试使用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 。
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)