react-native-image-drag
这是一个为了自由拖动图片而开发的库。
ImageContainer介绍
这个组件默认展示一个九宫格的图片框,图片可以在这个框内自由的拖动,根据拖动的结果自动排序图片。
这个组件非常适合类似于编辑发布一批图片的场景。
用户最多上传9张图片,可以自由的排序以及添加删除。
使用
使用某个上传组件获取到要上传的图片列表。通过props传递给组件
<ImageContainer ref="container" renderItem=thisrenderItem moveEnd=thismoveEnd images=thisstateimages > <Text style= color: "#fff" margin: 10 >自定义加入的文字或者组件</Text></ImageContainer> { return <Image source= uri: itemuri style= width: 100 height: 100 />}
如果想要知道最终的结果,可以使用this.refs.container.getImages()
方法拿到当前的排序结果。
props介绍
static defaultProps = images: //传入的图片列表,这里假设使用组件上传,图片地址使用uri字段 style: null //外部容器的样式,如果没有特殊需求会自动宽,没有高。 { } //自定义渲染单个项目,参数包括传入个单个数据、角标 { } //开始移动之前的钩子,可以设定样式、禁止ScrollView等 { } //移动结束,参数:原角标,将要插入的角标,已经移动的x/y
ImageMove介绍
这个组件是为了拖拽图片而开发的。
内部根据手势移动图片,只要外部容器允许,图片就可以任意拖动。
使用
可以自定义要拖动的内容的样式和具体内容。
<ImageMove moveEnd= this moveStart= thisprops renderItem= thisprops />
props介绍
static defaultProps = { } //渲染自定义内容 { } //拖动开始的事件 { } //拖动结束的事件
实际的使用可以参考
test
文件夹下的demo文件 使用react-native-syan-image-picker
组件上传图片 使用Button
组件显示按钮,触发事件