7D2281A6-51B7-41BB-B479-27E15D3201EF.png

类似这样的布局，如果一行不够显示的话，自动化将子控件换行到下一行

其实方法很简单，主要是记录下，省的头脑不清醒再给忘了。。。

主要是 flexWrap: 'wrap'这个style

nowrap：
  flex容器为单行。该情况下flex子项可能会溢出容器
wrap：
  flex容器为多行。该情况下flex子项溢出的部分会被放置到新行，子项内部会发生断行
wrap-reverse：
  反转 wrap 排列。

/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 * @flow
 */

import React, { Component } from 'react';
import {
    StyleSheet,
    Text,
    View,
    TouchableOpacity
} from 'react-native';
import PropType from 'prop-types';

export default class imageType extends Component<{}> {

    constructor(props){
        super(props);
    }

    render() {
        return (
            <View style={styles.container}>
                <View style={{ margin: 10, padding: 10, borderRadius: 5, backgroundColor: 'red'}}>
                    <Text>12asdfa3</Text>
                </View>
                <View style={{ margin: 10, padding: 10, borderRadius: 5, backgroundColor: 'red'}}>
                    <Text>12sd3</Text>
                </View>
                <View style={{ margin: 10, padding: 10, borderRadius: 5, backgroundColor: 'red'}}>
                    <Text>1asdfadfadsf23</Text>
                </View>
                <View style={{ margin: 10, padding: 10, borderRadius: 5, backgroundColor: 'red'}}>
                    <Text>1asdf23</Text>
                </View>
                <View style={{ margin: 10, padding: 10, borderRadius: 5, backgroundColor: 'red'}}>
                    <Text>1a23</Text>
                </View>
                <View style={{ margin: 10, padding: 10, borderRadius: 5, backgroundColor: 'red'}}>
                    <Text>12dfdfdfdfdfdfdfdfs3</Text>
                </View>

            </View>
        );
    }
}

/*声明属性*/
imageType.propTypes = {

};

/*属性默认值*/
imageType.defaultProps = {

};

const styles = StyleSheet.create({
    container: {
        backgroundColor: 'black',
        padding: 10,
        flexDirection: 'row',
        flexWrap: 'wrap',
    },
});