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',
    },
});