网上找了好久,相关问题也很少,尝试了很多,才试出来解决Image宽度一定,高度自适应的问题的方法。
实现后,效果如下,(图片可以在小框体中,宽度充满,上下滑动)
微信图片_20181121141628.png
import {
View,
Text,
StyleSheet,
ScrollView,
DeviceEventEmitter,
Image,
} from 'react-native'
import FitImage from 'react-native-fit-image'; //要先安装包
const ImageList = [
require('../../../assets/image/article/7.jpg'),
require('../../../assets/image/article/8.jpg'),
require('../../../assets/image/article/9.jpg'),
require('../../../assets/image/article/10.jpg'),
require('../../../assets/image/article/11.jpg'),
require('../../../assets/image/article/12.jpg'),
]
//通过resolveAssetSource获取本地图片宽高,(getSize方法只能用于网络图片的宽高)
let source = ImageList[tapid]
this.setState({
imw: Image.resolveAssetSource(source).width,
imh: Image.resolveAssetSource(source).height,
})
//再在相应FitImage里引用,originalWidth originalHeight为获取的图片真实宽高
//图片就会在ScrollView里,保持宽度一定,高度自动变化的显示了。
<ScrollView style={[commentStyle.containerVC]}>
<FitImage
source={ImageList[tapid]}
resizeMode="contain"
originalWidth={imw}
originalHeight={imh}
/>
</ScrollView>
网友评论