九宫格布局

import React,{Component} from 'react';

import {
    AppRegistry,
    StyleSheet,
    Text,
    View,
    ListView,
    AlertIOS,
} from 'react-native';

var Dimensions = require('Dimensions');

var width = Dimensions.get('window').width;

var leftpading = (width- 300) /4;

export default class jiuGongGe extends Component {

    render() {

        return(

            <View style={styles.styleRootView}>

                {this.createUI()}
            </View>

        );
    }

    createUI(){

        var array = [];

        for(var i=0;i<20;i++){

            array.push(

                <View key={i} style={styles.styleView}></View>
            )

        }
     return array;
}

}

const styles = StyleSheet.create({

    styleRootView:{
        backgroundColor:'rgba(0,0,0,0.5)',
        width:width,
        flexDirection:'row',
        flexWrap:'wrap',//换行
    },

    styleView:{
        backgroundColor:'red',
        width:100,
        height:100,
        marginLeft:leftpading,
        marginTop:leftpading,
    }

});