1.需求类似如下
如果安卓做的话应该很简单
2.轮子,选用的是蚂蚁金服的rn组件,简单分析下哈,拿到图片数据后用rn自带的FlatList加Grid(宫格),来实现类似效果,感觉还可以,金服组件我之前写过,需要的朋友可以看看
link.Grid地址
3.上代码?
// 相册部分主要实现代码
< FlatList
data = {图片地址imagePath+日期date 格式不固定,具体看项目,我这里拿到的数据比较麻烦,需要遍历整理}
ListEmptyComponent={this.showNoneData()}
renderItem = {( {item,index }) => {
datas=[]//每一次渲染列表将data清空否则列表会数据重复(项目中是这样,单独用没试过)
let pathIndex = null //放大图片所需要的位置(项目中添加了放大图片功能,需要跳转到另一个页面,再另一个页面需要确定图片位置坐标)
if(item.imgPath!=undefined){//根据不同的数据结构有不同的遍历方法
item.imgPath.forEach(function (item) {
//将数据整理成宫格组件需要的格式,这个Image路径问题我找了好久,亲测可用
datas.push( {icon: <Image source={{uri:Platform.OS === 'android'?'file://' + item: '' + item }} style={{width:width*0.2,height:width*0.2}}/>})
})
}
pathIndex = index
return(
< View style = { {}} >
< Text style = { {color:"black", fontSize:20, marginLeft:5}} > {item.date} </Text >
//Grid本体,详细文档官网有,尽管少的可怜
<Grid data={datas} columnNum={4}
hasLine={false}
//点击跳转到放大图片页面的方法,onCilck组件自带,参数不可变,index为点击的图片下标
onClick={(_el,index) => this.goToPage(index,pathIndex)}
/>
</View >
)
}}
/>