使用FlatList写一个类似iOS的collectionView的效果

image.png

第一步

我们要出列出所需要的组件以及一些常亮和两张图片（一张是未选中一张是选中后的）

import React, { Component } from 'react';
import {
    AppRegistry,
    Dimensions,
    StyleSheet,
    TouchableOpacity,
    Text,
    View,
    FlatList,
    Image,
    Platform,
    NativeModules,
} from 'react-native';

const SCREEN_WIDTH = Dimensions.get('window').width;
const checkedIcon = require('../../assets/images/video_selete.png')
const unCheckedIcon = require('../../assets/images/unSelectVideo.png')

第二部

然后就是写基本的框架 当然基本的框架肯定是FlatList

export default class SeleteVideo extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            dataSource: [],
        };
    }
    componentDidMount() {
        this.fetchLocalVideos()
    }
    //最后存放选择的视频数组
    selectArr = []
    //读取相册的视频
    fetchLocalVideos() {
        
                    this.setState({
             dataSource: [ {
        text: '00:00',
        isChecked:false,
        image: 'https://gss0.baidu.com/9fo3dSag_xI4khGko9WTAnF6hhy/zhidao/pic/item/3812b31bb051f819dc048662dbb44aed2e73e7f1.jpg',
      }, {
        text: '00:00',
        isChecked:false,
        image: 'https://gss0.baidu.com/9fo3dSag_xI4khGko9WTAnF6hhy/zhidao/pic/item/3812b31bb051f819dc048662dbb44aed2e73e7f1.jpg',
      },]    
})
                   
    }

    render() {

        return (
            <View style={{flex:1,backgroundColor:'white'}}>
            <FlatList //创建FlatList
                columnWrapperStyle={styles.listViewStyle}
                data={this.state.dataSource} //设置数据源
                renderItem={this.renderRow} //设置cell
                horizontal={false}
                numColumns={4}
                extraData={this.state.dataSource}
                contentContainerStyle={styles.listViewStyle} //设置cell的样式
            />
            </View>
        );
    }

    //返回cell的方法
    renderRow = (rowData) => {
        let sss = this.state.dataSource
        console.log(this.state.dataSource + "311111")
        return (
            <View style={styles.bgStyle}>
                <TouchableOpacity style={styles.imageStyle} activeOpacity={1}
                    onPress={() => {
                        this.itemClick(rowData)
                    }}
                >
                    <Image
                        style={styles.imageStyle}
                        source={{
                            uri: rowData.item.image,
                        }}
                    />
                    <View style={styles.itemTimeBgStyle} />
                    <Image source={rowData.item.isChecked ? checkedIcon:unCheckedIcon} style={styles.itemCheckedStyle} />
                    <Text style={styles.itemTimeTextStyle}>{'00:' + rowData.item.text}</Text>
                </TouchableOpacity>
            </View>
        );
    }
    //选取或者去掉选取
    itemClick(rowData) {
        rowData.item.isChecked = !rowData.item.isChecked
        this.state.dataSource[rowData.index] = rowData.item
        this.setState({
            dataSource: [].concat(this.state.dataSource)
        }
        );
        for (let obj of this.state.dataSource) {
            console.log(obj.isChecked)
        }
    }
    //点击导航的下一步调用
    nextBtnClick() {
        this.selectArr = []
        for (let object of this.state.dataSource) {
            if (object.isChecked == true) {
                this.selectArr.push(object)
            }
        }
        console.log('选择的数组' + this.selectArr.length)
        //this.props.navigation.navigate('下一级界面', { this.selectArr })
    }

    _handleBack() {
        this.props.navigation.goBack();
      }
    
}
//样式
itemSpace = 2; //cell 的水平间距 
itemW = (SCREEN_WIDTH - itemSpace * 3) / 4;
const styles = StyleSheet.create({
    listViewStyle: {
        justifyContent: 'flex-start',
    },
    bgStyle: {
        width: itemW, //cell的宽度
        height: itemW,
        marginTop: 3,
        marginRight: itemSpace,//距离

    },
    imageStyle: {
        width: itemW,
        height: itemW,
        //backgroundColor: 'red',
        marginBottom: 0,
    },
    itemCheckedStyle: {
        position: 'absolute',
        width: 24,
        height: 24,
        //backgroundColor: 'red',
        top: 6,
        left: itemW - 30,
        borderRadius: 12,
    },
    itemTimeBgStyle: {
        width: 50,
        height: 20,
        backgroundColor: '#000',
        opacity: 0.40,
        bottom: 25,
        left: itemW - 55,
        borderRadius: 10,
    },
    itemTimeTextStyle: {
        width: 50,
        height: 20,
        bottom: 43,
        left: itemW - 55,
        opacity: 1,
        color: 'white',
        backgroundColor: 'transparent',
        textAlign: 'center',
        fontSize: 13,
        // backgroundColor:'blue',
    },
    arrowBack: {
        fontSize: transformSize(54),
        color: '#666',
        textAlign: 'left',
        marginLeft: transformSize(30),
      },
});

总结 horizontal={false} numColumns={横向排布的个数}

个人感觉其实这个效果还是很好实现的主要有一个坑就是FlatList的一个属性 horizontal={false} numColumns={4} 这个就是可以让FlatList实现横向布局,讲真儿,我已开始就是不知道这个坑而导致最初使用了ListView去实现了这个效果,但是ListView依然是过期的组件Facebook已经不推荐了