react-native 实现图片宽度一定,高度自适应

网上找了好久,相关问题也很少,尝试了很多,才试出来解决Image宽度一定,高度自适应的问题的方法。

实现后,效果如下,(图片可以在小框体中,宽度充满,上下滑动)


react-native 实现图片宽度一定,高度自适应_第1张图片
微信图片_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里,保持宽度一定,高度自动变化的显示了。

   

你可能感兴趣的:(react-native 实现图片宽度一定,高度自适应)