美文网首页web前端开发
react-native 实现图片宽度一定,高度自适应

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

作者: Fairy_zhao | 来源:发表于2018-11-21 14:17 被阅读0次

    网上找了好久,相关问题也很少,尝试了很多,才试出来解决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>
    

    相关文章

      网友评论

        本文标题:react-native 实现图片宽度一定,高度自适应

        本文链接:https://www.haomeiwen.com/subject/cefcqqtx.html