RN 多行换行布局

import React, { Component } from 'react';
import {
  AppRegistry,
  StyleSheet,
  Text,
  View
} from 'react-native';

export default class TFlex extends Component {
  render() {

    return (
      <View style={styles.container}>
        <Text style={styles.sub} >1Text>
        <Text style={styles.sub} >2Text>
        <Text style={styles.sub} >3Text>
        <Text style={styles.sub} >4Text>
        <Text style={styles.sub} >5Text>
        <Text style={styles.sub} >6Text>
        <Text style={styles.sub} >7Text>
        <Text style={styles.sub} >8Text>
        <Text style={styles.sub} >9Text>
        <Text style={styles.sub} >10Text>
        <Text style={styles.sub} >11Text>
     View>
    );
  };
}

const styles = StyleSheet.create({
  container:{
    flex: 1,
    flexDirection: "row",
    justifyContent: 'space-around',
    alignItems: 'center',
    flexWrap: "wrap",
    backgroundColor: '#F5FCFF',
  },
  sub: {
    margin: 10,
    width: 50,
    height: 50,
    backgroundColor: "red",
  },
});

AppRegistry.registerComponent('TFlex', () => TFlex);

效果如下：