React Native(五)点击图片进行大图浏览

项目中经常需要点击一张图片或者一组图片来查看大图，在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文件来实现，但这种方式太粗暴了，应该有更优的方案来第三方库进一步定制？

附上代码Demo地址