（六）[安卓GIF图片与react-native-zoom-view]React Native 从零到构建Android与IOS应用发布

安卓GIF图片的支持

安卓图片是不支持GIF的，所以需要用到facebook的

方法很简单，打开APP目录下的android/app/build.gradle

在dependences{}中加入以下代码

dependences{

    .....

    compile 'com.facebook.fresco:fresco:1.5.0'

    compile 'com.facebook.fresco:animated-gif:1.5.0'

    // 如果你需要支持WebP格式，包括WebP动图

    //compile 'com.facebook.fresco:animated-webp:1.5.0'

    //compile 'com.facebook.fresco:webpsupport:1.5.0'

}

请注意，最好用新的版本，否则，可能会导致gif还是没办法正常显示，例如我之前用1.3.1就出现这种情况，后来升级到1.5.0就好了，还有，不要在组件中用组件引入GIF动图，否则你会悲惨的发现，你的动图不会动！！

---

下面我来介绍一个功能更全面的多图片集浏览插件。

之前我的教程中有介绍到react-native-photo-browser的使用，确实很方便，但是，但是，但是！！！！重要的事情说三遍，我发现它无法支持手势，导致无法放大缩小！让我自己封装我感觉自己没这个时间，然后疯狂的找替代版本，然而，试过react-native-zoom-image-view，发现体验特别烂！会出现什么手势切换到一半啊，左边resize了右边却是下一张图啊，于是我狂搜Github，然而好多都不适用，比如有OC的，有java的，最后在一篇CSDN的博客上找到一个解决方案，特别好用，虽然安卓上不那么灵敏，但那是由于手势的冲突，主要是支持左右切换，上下左右图片拖动，手势放大缩小等，但它本身不带导航，所以，需要手动写一个

那就是插件：

react-native-swiper

react-native-zoom-view

一个是焦点图插件，一个是图片显示插件

老规矩。安装先

npm i -g react-native-swiper --save

npm i -g react-native-zoom-view --save

yarn add react-native-swiper

yarn add react-native-zoom-view

然后跟之前的react-native-photo-browser一样，创建一个component来作为展示的场景

由于没有自带导航器，正好我用了navigation，所以很方便的加进去了，有一点需要注意，由于图片的size配置是根据设备的宽高来决定，所以如果你使用了导航器，请一定注意，height一定要减掉导航器高，否则你会发现，图片下移，且显示不完

import Swiper from 'react-native-swiper'

import ViewControl from 'react-native-zoom-view'

const {width,height} = Dimensions.get('window');

height = height-48; // 我的导航器高48，所以需要减掉

然后在注册props时载入数据

constructor(props) {

    super(props);

        const { params } = this.props.navigation.state;

        const media = params.media; // 这是一个list数组，['picurl','picurl','picurl']，可以是本地，也可以是网络图片，看你自己需求

        this.state = {

            images: media

        };

}

然后啊，我们就需要一个函数来循环输出图片组件内容

renderSwiperItemView(){

    return this.state.images.map((item,i)=>{

        return (

            

            key={i}

            cropWidth={width}

            cropHeight={height}

            imageWidth={width}

            imageHeight={height}>

                    

                        style={{

                            width:width,

                            height:height,

                            resizeMode: 'contain',

                            backgroundColor:'rgba(0,0,0,0)'

                        }}

                        ource={{

                            uri:item

                        }}/>

            

        )

    })

}

然后在轮播组件中展示就可以啦，定义navigation导航器的代码我就不写啦 

static navigationOptions=>{} //里面定义你的导航器内容就好了

render() {

//3.获取传入的图片等信息

return (

    loop={false} //关闭自动循环

    paginationStyle={{bottom: 10}} // 底部图片数量和焦点的小点的自定义style

    // dot是定义未选中小点的样式，由于默认样式是 alpha 透明度 0.2，我黑色背景看不到，所以我重定义了它的样式，改为背景透明，边框1，边框颜色同选中一样

    //  activeDot是定义焦点的小点的样式，与dot用法一样

    dot={}

    style={{backgroundColor:'#000000'}}

    showsPagination={true}> // 显示底部图片数量和焦点的小点

        {this.renderSwiperItemView()}

    

);

}

至此，我就可以通过点击图片列表触发navigation导航器push到这个screen来查看图片啦，功能很强大，左右切换，还可以是否最后一张图返回到首页，放大缩小，图片拖动，功能很全面，具体参数和配置请查看github：

swiper : https://github.com/leecade/react-native-swiper

zoom-view : https://github.com/mochixuan/react-native-zoom-view

动手前，请先查看官方文档，然后再使用，有问题的，不要耽搁太多时间，不行就换一个，达到目的为止，RN也有一段时间了，总会有合适的插件，毕竟大部分需求都是硬需求