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} >1</Text>
        <Text style={styles.sub} >2</Text>
        <Text style={styles.sub} >3</Text>
        <Text style={styles.sub} >4</Text>
        <Text style={styles.sub} >5</Text>
        <Text style={styles.sub} >6</Text>
        <Text style={styles.sub} >7</Text>
        <Text style={styles.sub} >8</Text>
        <Text style={styles.sub} >9</Text>
        <Text style={styles.sub} >10</Text>
        <Text style={styles.sub} >11</Text>
     </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);

效果如下:

©️2020 CSDN 皮肤主题: 大白 设计师:CSDN官方博客 返回首页