react-native-image-zoom-viewer实现了类似微信朋友圈浏览图片的效果,点击小图片实现浏览原图效果。
安装:
npm i react-native-image-zoom-viewer --save
react-native link react-native-image-zoom-viewer
代码如下:
import ImageViewer from 'react-native-image-zoom-viewer';
import {Modal,} from'react-native'
{
this.state.imageArry.map((item, index)=> {
return this._renderImage(item, index);
})
}
//图片排列
_renderImage(item, index) {
let url = item.url;
let source = {uri: url};
return (
<View style={{alignItems: 'center', marginTop: 5, marginLeft: 5}} key={'image' + index}>
<TouchableOpacity onPress={this._openMax.bind(this, source, index)}>
<Image source={source}
style={styles.img}/>
</TouchableOpacity>
</View>
);
}
_openMax(source, index) {
this.setState({
isImageShow: true,
imageIndex: index,
});
}
{this.state.isImageShow ?
<Modal visible={true} transparent={true}
onRequestClose={()=> {
this.setState({
isImageShow: false,
});
}}>
<ImageViewer imageUrls={this.state.dataArry}
onCancel={()=> {
this.setState({
isImageShow: false,
});
}}
index={this.state.imageIndex}
saveToLocalByLongPress={false}/>
</Modal>
: null}