ReactNative實現GridView

ReactNative內置了ListView組件但是沒有類似GridView這樣的組件。利用一些已經有的屬性是可以實現GridView的，利用ContentContainerStyle的屬性然后配合樣式就可以實現GridView。

import React, {Component} from 'react';
import {
    StyleSheet,
    Text,
    View,
    ListView,
    TouchableWithoutFeedback
} from 'react-native';
const styles = StyleSheet.create({
    contentContainerStyle: {
        flexDirection: 'row',
        flexWrap: 'wrap',
        alignItems: 'flex-start',
        justifyContent: 'space-between'
    },
});
export default class GridView extends Component {
    constructor(props) {
        super(props);
        let dividerHorizontal = this.props.dividerHorizontal ? this.props.dividerHorizontal : 0;
        let column = this.props.column ? this.props.column : 2;
        let emptyDataSource = new ListView.DataSource({
            rowHasChanged: (r1, r2)=>r1 != r2
        })
        this.state = {
            'dataSource': emptyDataSource,
            'column': column,
            'viewWidth': 0,
            'dividerHorizontal': dividerHorizontal
        };
    }
    _renderItem(data) {
        let viewWidth = this.state.viewWidth;
        let column = this.state.column;
        let dividerHorizontal = this.state.dividerHorizontal;
        let itemWidth = (viewWidth - (dividerHorizontal * column - dividerHorizontal)) / column;
        let renderItem = this.props.renderItem;
        return (
            <View style={{width: itemWidth}}>
                {
                    renderItem && renderItem(data)
                }
            </View>
        );
    }
    render() {
        let refreshControl = this.props.refreshControl ? this.props.refreshControl : null;
        return (
            <View
                style={{flex: 1}}
                onLayout={(event)=> {
                    let width = event.nativeEvent.layout.width;
                    if (!width || width === this.state.viewWidth)
                        return;
                    this.setState({
                        'viewWidth': width,
                        'dataSource': this.props.dataSource
                    })
                }}>
                <ListView
                    style={{flex: 1}}
                    contentContainerStyle={styles.contentContainerStyle}
                    dataSource={this.state.dataSource}
                    renderRow={this._renderItem.bind(this)}
                    refreshControl={refreshControl}
                />
            </View>
        );
    }
}

《架構文摘》每天一篇架構領域重磅好文，涉及一線互聯網公司應用架構（高可用、高性 能、高穩定）、大數據、機器學習等各個熱門領域。