项目中经常需要点击一张图片或者一组图片来查看大图，在iOS端通常是用大名鼎鼎的 MWPhotoBrowser,在React Native也有同样的第三方库，
- react-native-photo-browser:400+参考MWPhotoBrowser 实现,但是不支持缩放
- react-native-image-zoom-viewer：300+：支持缩放操作，但是底部无操作按钮
- AlbumView支持多图左右切换显示，支持双指按捏缩放、单指触摸移动手势, 使用纯 JS 实现
下面简单介绍下react-native-photo-browser的使用
一：安装第三方库
npm install react-native-photo-browser --save
二：新建一个PhotoBrowserScene.js
便于在程序多个地方使用，这里用一个页面组件来封装PhotoBrowser，使用方式是通过react-navigation来管理页面，有3个地方要注意
import PhotoBrowser from 'react-native-photo-browser';
import React, { Component } from 'react';
class PhotoBrowserScene extends Component {
static navigationOptions = {
//1.隐藏导航头部
header: null,
};
_goBack = () => {
//2.点击返回关闭页面
this.props.navigation.goBack()
}
render() {
//3.获取传入的图片等信息
const { params } = this.props.navigation.state;
const media = params.media
const index = 0
return (
<PhotoBrowser
onBack={this._goBack}
mediaList={media}
initialIndex={index}
displayActionButton={true}
displayTopBar={true}
/>
);
}
}
export default PhotoBrowserScene;
三：添加PhotoBrowserScene到导航配置中
const RNForum = StackNavigator(
{
Web: { screen: WebViewPage },
Login: { screen: LoginScene },
Photo: {screen: PhotoBrowserScene}
}
...
)
四：在页面中用navigate调用并传递参数
renderCell = (info: Object ) => {
return <PostCell info={info.item} onPress={this.onPress} />
}
onPress = (info) => {
// 需显示的图片列表
let media = [{
photo: info.img_urls_1,
}, {
photo: info.img_urls_2
}]
const { navigate } = this.props.navigation
navigate('Photo', {media:media, index:0})
}
五：效果如下
查看大图.gif
备注：
实际中如果需要去掉返回按钮的"Back"文字，或者自定义底部操作栏等，可以直接修改对应的js文件来实现，但这种方式太粗暴了，应该有更优的方案来第三方库进一步定制？
