React Native九宫格制作 练习flex 上下 左右居中

import React,{Component} from 'react';
import {View,Text,StyleSheet} from 'react-native';

export default class Detail extends Component{
    render(){
        return(
            <View style={styles.vStyle}>
                {this.nine()}
            </View>
        );
    }

    nine(){
        let grad = [];
        for(let i = 0;i<9;i++){
            let g = <View key={i} style={styles.gStyle}>
                <Text style={styles.gText}>{i}</Text>
            </View>;
            grad.push(g);
        }
        return grad;
    }
}

const styles = StyleSheet.create({
    vStyle:{
        flexDirection:'row',
        flexWrap:'wrap'
    },
    gStyle:{
        width:120,
        height:120,
        marginLeft:18,
        marginTop:10,
        backgroundColor:'#137',
        justifyContent:'center',
        alignItems:'center'
    },
    gText:{
        color:'#fff',
        fontSize:20
    }
});