react-native 实现多图原比例展示切预览

按照客户想要的效果是图片是按比例、且按照顺序的排列，想要实现原比例展示就得到图片的宽高，而后端只有一条图片链接
一开始是用 Image.getSize 遍历获取宽高，一张图片可能没什么，但是40、50等多张的时候就导致很卡，很长时间才能显示出来。

所以最后是使用了 react-native-auto-height-image 解决了宽高比例问题、再使用react-native-image-zoom-viewer实现预览

图片数组：

部分代码：

import ImageViewer from 'react-native-image-zoom-viewer';
import AutoHeightImage from 'react-native-auto-height-image';

//图片展示
    <View style={{flex:1}}>
        {
            this.state.imgArr.map((item,id)=>{
                return(
                    <TouchableOpacity
                        activeOpacity={1}
                        onPress={()=>{this.setState({modalVisible:true,ImageIndex:id})}}
                        key={id}
                        style={{width:Util.size.width-100,flex:1}}>
                        <AutoHeightImage
                            width={Util.size.width-100}
                            source={{uri:item.url}}
                        />
                    </TouchableOpacity>
                )
            })
        }
    </View>

//预览
    <View style={{ position: "absolute", top: 0, bottom: 0, left: 0, right: 0 }}>
        <Modal
            animationType={"fade"}
            transparent={true}
            visible={this.state.modalVisible}
            onRequestClose={() => {
                // console.log('ssss')
                this.setState({
                   modalVisible:false
               })
            }}
        >
            <ImageViewer
                // imageUrls={images}
                imageUrls={this.state.imgArr} 
                index={this.state.ImageIndex}   //图片数组下标
                saveToLocalByLongPress={true}
                maxOverflow={0}
                menuContext={{ "saveToLocal": "保存图片", "cancel": "取消" }}
                enableImageZoom={true}
                onClick={()=>this.setState({modalVisible:false})}
                // onSave={(url) => { this.savePhoto(url) }}
            />

            {/*<ImageViewer*/}
            {/*    imageUrls={this.state.imgArr} // 照片路径*/}
            {/*    // enableImageZoom={true} // 是否开启手势缩放*/}
            {/*    // saveToLocalByLongPress={true} //是否开启长按保存*/}
            {/*    index={0} // 初始显示第几张*/}
            {/*    // failImageSource={} // 加载失败图片*/}
            {/*    // loadingRender={this.renderLoad}*/}
            {/*    // enableSwipeDown={false}*/}
            {/*    // menuContext={{ "saveToLocal": "保存图片", "cancel": "取消" }}*/}
            {/*    // onChange={(index) => { }} // 图片切换时触发*/}
            {/*    // onClick={() => { // 图片单击事件*/}
            {/*    //     this._Close()*/}
            {/*    // }}*/}
            {/*    // onSave={(url) => { this.savePhoto(url) }}*/}
            {/*/>*/}
        </Modal>
    </View>