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: {
         itemWidth,
        height: itemHeight,
        backgroundColor: "#ff0000",
        alignItems: 'center',
        justifyContent: 'center',
        marginLeft: marginLeft,
        marginTop: 5
    }
});