RN九宫格

九宫格可以用两种方式来做，一种使用SectionList，是我的另外一篇博客，还有一种的纯代码计算，下面是效果图

代码如下：

var Dimensions = require('Dimensions');

var {width, height} = Dimensions.get("window");//屏幕的宽和高

var itemWidth = 100;//item宽度

var itemHeight = 100;//item高度

var cols = 3;//列数

var marginLeft = (width-itemWidth*cols)*1.0/(cols+1);//左侧距离

export default class MyApp extends Component {

    static  defaultProps = {

        count: 5

    }

    getAllText(){

        var texts = [];

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

            texts.push(

                <View key={i} style={styles.textStyle}>

                    <Text >123</Text>

                </View>

            )

        }

        return texts;

    }

    render() {

        return (

            <View style={styles.wrapper}>

                {this. getAllText()}

            </View>

        )

    }

}

const styles = StyleSheet.create({

    wrapper: {

        flexDirection:'row',

        // 换行显示

        flexWrap:'wrap',

        paddingTop: 40

    },

    textStyle: {

        width: itemWidth,

        height: itemHeight,

        backgroundColor: "#ff0000",

        alignItems: 'center',

        justifyContent: 'center',

        marginLeft: marginLeft,

        marginTop: 5

    }

});