原文地址

網(wǎng)上找了好久，相關(guān)問題也很少，嘗試了很多，才試出來(lái)解決Image寬度一定，高度自適應(yīng)的問題的方法。

實(shí)現(xiàn)后，效果如下，（圖片可以在小框體中，寬度充滿，上下滑動(dòng)）

微信圖片_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'),

]

//通過(guò)resolveAssetSource獲取本地圖片寬高，（getSize方法只能用于網(wǎng)絡(luò)圖片的寬高）
let source =  ImageList[tapid]
this.setState({
  imw: Image.resolveAssetSource(source).width,
  imh: Image.resolveAssetSource(source).height,
})


//再在相應(yīng)FitImage里引用，originalWidth originalHeight為獲取的圖片真實(shí)寬高
//圖片就會(huì)在ScrollView里，保持寬度一定，高度自動(dòng)變化的顯示了。
<ScrollView style={[commentStyle.containerVC]}>
   <FitImage
      source={ImageList[tapid]}
      resizeMode="contain"
      originalWidth={imw}
      originalHeight={imh}
   />
</ScrollView>

原文地址