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

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

export default class Detail extends Component{
    render(){
        return(
            
                {this.nine()}
            
        );
    }

    nine(){
        let grad = [];
        for(let i = 0;i<9;i++){
            let g = 
                {i}
            ;
            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
    }
});

 

你可能感兴趣的:(RN)