react-native 日常-rn实现相册功能之页面部分

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 > 
              ) 
            }}
          />  

4.最后感谢阿里?，上成果