ReactNative 布局自动换行的实现

核心思想：
基于row布局的wrap属性实现自动换行

WorkStatusViewStyles = StyleSheet.create({
    //基于flex-box布局
    container: {
        width: width,
        flexDirection: 'column',
        flexWrap: 'wrap',
        backgroundColor: '#dd0ff0',
        alignItems: 'flex-start',
        justifyContent: 'flex-start',
    },

    function_list: {
        //以下四个关键属性实现自动换行
        width: width,
        flexWrap: 'wrap',
        display:'flex',
        flexDirection: 'row',
        backgroundColor: '#FBFBFB',
    },

    function_list_item_normal: {
        flexWrap: 'wrap',
        flexDirection: 'column',
        alignItems: 'flex-start',
        justifyContent: 'flex-start',
        backgroundColor: '#FFFFFF',
        padding: 9.6,
        margin: 9.6 / 4,
    },

    function_list_item_selected: {
        flexWrap: 'wrap',
        flexDirection: 'column',
        alignItems: 'flex-start',
        justifyContent: 'flex-start',
        backgroundColor: '#0088F3',
        padding: 9.6,
        margin: 9.6 / 4,
    },

    normal_text: {
        fontSize: 16,
    },

});

效果

屏幕快照 2018-01-22 下午2.33.04.png