安卓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就好了，还有，不要在<Text>组件中用<Image/>组件引入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 (
<ViewControl
key={i}
cropWidth={width}
cropHeight={height}
imageWidth={width}
imageHeight={height}>
<Image
style={{
width:width,
height:height,
resizeMode: 'contain',
backgroundColor:'rgba(0,0,0,0)'
}}
ource={{
uri:item
}}/>
</ViewControl>
)
})
}
然后在轮播组件中展示就可以啦，定义navigation导航器的代码我就不写啦
static navigationOptions=>{} //里面定义你的导航器内容就好了
render() {
//3.获取传入的图片等信息
return (
<Swiper
loop={false} //关闭自动循环
paginationStyle={{bottom: 10}} // 底部图片数量和焦点的小点的自定义style
// dot是定义未选中小点的样式，由于默认样式是 alpha 透明度 0.2，我黑色背景看不到，所以我重定义了它的样式，改为背景透明，边框1，边框颜色同选中一样
// activeDot是定义焦点的小点的样式，与dot用法一样
dot={<View style={{backgroundColor:'rgba(0,0,0,0)',borderColor:'#007aff',borderWidth:1, width: 8, height: 8,borderRadius: 4, marginLeft: 3, marginRight: 3, marginTop: 3, marginBottom: 3}} />}
style={{backgroundColor:'#000000'}}
showsPagination={true}> // 显示底部图片数量和焦点的小点
{this.renderSwiperItemView()}
</Swiper>
);
}
至此，我就可以通过点击图片列表触发navigation导航器push到这个screen来查看图片啦，功能很强大，左右切换，还可以是否最后一张图返回到首页，放大缩小，图片拖动，功能很全面，具体参数和配置请查看github：
swiper : https://github.com/leecade/react-native-swiper
zoom-view : https://github.com/mochixuan/react-native-zoom-view
动手前，请先查看官方文档，然后再使用，有问题的，不要耽搁太多时间，不行就换一个，达到目的为止，RN也有一段时间了，总会有合适的插件，毕竟大部分需求都是硬需求
网友评论