react-native-sf-zoom-image-viewer
图片查看器，支持手势缩放、分享
安装
- npm install react-native-sf-zoom-image-viewer
- npm install react-native-video
- react-native link react-native-video
Props
| parameter | type | required | description | default |
|---|
| width | boolean | no | 宽度 | 屏幕宽度 |
| height | boolean | no | 高度 | 屏幕高度 |
| backgroundColor | string | no | 背景颜色 | "black" |
| onScroll | func | no | 索引发生变化时调用 onScroll(index) | null |
SFZiConfig
| parameter | type | required | description | default |
|---|
| img_dis | number | no | 图片间距 | 10 |
| max_speed_x | number | no | 滑动速度超过多少进入下一页 | 0.5 |
| max_move_x | number | no | 滑动距离超过多少进入下一页 | 100 |
| show_duration | number | no | 动画时间 | 300 |
| animated | bool | no | 是否有显示动画，如果有在数据里对"handel"进行赋值 | true |
| showDes | bool | no | 是否显示底部文字，如果有在数据里对"des"进行赋值 | true |
| type_img | number | no | 显示图片类型 | 0 |
| type_video | number | no | 显示图片类型 | 1 |
| type_long_img | number | no | 显示图片类型 | 2 |
Methods
| Methods | Params | Param Types | description | Example |
|---|
| showWithData | data,index | array,number | 显示图片查看器 | this.obj.show(data,0) |
例子
import React, {Component} from 'react';
import {
Platform,
StyleSheet,
Text,
View,
TouchableWithoutFeedback,
ScrollView,
findNodeHandle,
Dimensions,
Image
} from 'react-native';
import {SFZiConfig,SFZiView} from 'react-native-sf-zoom-image-viewer'
var dw = Dimensions.get('window').width;
var dh = Dimensions.get('window').height;
type
Props = {};
export default class App extends Component<Props> {
click = (index) => {
var ds = [];
for (var i = 0; i < this.dataSource.length; i++) {
var handel = findNodeHandle(this.refs['img_' + i]);
var subData = this.dataSource[i];
var data = {
source: subData.path,
type: subData.type,
videoSource: subData.video_path,
handel: handel,//SFZiConfig.animated == false时可以不填(为了获取控件位置信息)
des:'那年夏天，我无比憧憬大学；今年夏天，我却无比憧憬那年'+i//SFZiConfig.showDes == false时可以不填
}
ds.push(data);
}
this.refs.zoom.showWithData(ds,index);
}
render_imgs = () => {
var imgs = []
let column = 3;
let itemWidth = (dw - (10 * column - 10)) / column;
for (var i = 0; i < this.dataSource.length; i++) {
var img = this.dataSource[i].path;
if (typeof(this.dataSource[i].path) == 'string') {
img = {uri: this.dataSource[i].path}
}
imgs.push(
<TouchableWithoutFeedback key={i} onPress={this.click.bind(this, i)}>
<Image ref={'img_' + i} style={{
width: itemWidth,
height: itemWidth,
marginTop: 10
}} source={img}></Image>
</TouchableWithoutFeedback>
)
}
return imgs;
}
render() {
return (
<View style={{
flex: 1,
backgroundColor: 'white',
}}>
<View style={{
flex: 1,
flexDirection: 'row',
flexWrap: 'wrap',
alignItems: 'flex-start',
justifyContent: 'space-between',
marginTop: 80
}}>
{this.render_imgs()}
</View>
<SFZiView ref={(ref)=> {
this.zoom = ref
}}/>
</View>
)
}
componentWillMount() {
this.dataSource = [
{
path: 'http://imgsrc.baidu.com/imgad/pic/item/cdbf6c81800a19d8a1af34d139fa828ba71e46b1.jpg',
type: SFZoomViewConfig.ZOOM_TYPE_IMG
},
{
path: 'http://img1.imgtn.bdimg.com/it/u=1777558445,2281514504&fm=200&gp=0.jpg',
type: SFZoomViewConfig.ZOOM_TYPE_IMG
},
{
path: 'http://image.pearvideo.com/cont/20170525/cont-1084591-10337967.jpg',
type: SFZoomViewConfig.ZOOM_TYPE_VIDEO,
video_path: 'http://video.pearvideo.com/mp4/short/20170525/cont-1084591-10484983-sd.mp4'
},
{
path: 'http://img2.imgtn.bdimg.com/it/u=2610705528,1626175376&fm=200&gp=0.jpg',
type: SFZoomViewConfig.ZOOM_TYPE_IMG
},
{
path: 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1523263263604&di=3a8cf59260058fbc40f36330900fd2cc&imgtype=jpg&src=http%3A%2F%2Fimg4.imgtn.bdimg.com%2Fit%2Fu%3D2779393999%2C2850222965%26fm%3D214%26gp%3D0.jpg',
type: SFZoomViewConfig.ZOOM_TYPE_LONG_IMG
},
{
path: 'http://img3.imgtn.bdimg.com/it/u=594996916,636240317&fm=200&gp=0.jpg',
type: SFZoomViewConfig.ZOOM_TYPE_IMG
},
{
path: 'http://img3.imgtn.bdimg.com/it/u=594996916,636240317&fm=200&gp=0.jpg',
type: SFZoomViewConfig.ZOOM_TYPE_IMG
},
{
path: 'http://img0.imgtn.bdimg.com/it/u=2257366377,1526496951&fm=200&gp=0.jpg',
type: SFZoomViewConfig.ZOOM_TYPE_IMG
},
{
path: 'http://img1.imgtn.bdimg.com/it/u=3836562103,1802124562&fm=200&gp=0.jpg',
type: SFZoomViewConfig.ZOOM_TYPE_IMG
},
]
}
componentDidMount() {
}
}