React native 反应方向：'；第'行；多行

我想知道是否有一种方法可以使flexDirection:'row'具有多行。因为现在如果我在第二行有10个对象，non将转到第二行。这是我在文档中添加了另外两个

元素的示例

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

export default class FlexDirectionBasics extends Component {
  render() {
    return (
      // Try setting `flexDirection` to `column`.
      <View style={{flex: 1, flexDirection: 'row'}}>
        <View style={{width: 50, height: 50, backgroundColor: 'powderblue'}} />
        <View style={{width: 50, height: 50, backgroundColor: 'skyblue'}} />
        <View style={{width: 50, height: 50, backgroundColor: 'steelblue'}} />
        <View style={{width: 50, height: 50, backgroundColor: 'skyblue'}} />
        <View style={{width: 50, height: 50, backgroundColor: 'steelblue'}} />
      </View>
    );
  }
};

// skip this line if using Create React Native App
AppRegistry.registerComponent('AwesomeProject', () => FlexDirectionBasics);

import React，{Component}来自'React'；
从“react native”导入{AppRegistry，View}；
导出默认类FlexDirectionBasics扩展组件{
render（）{
返回(
//尝试将“flexDirection”设置为“column”。
);
}
};
//如果使用CreateReact本机应用程序，请跳过此行
AppRegistry.registerComponent（'AwesomeProject'，（）=>FlexDirectionBasics）；

您可以使用

flex-wrap:wrap

，这样当内容达到此组件允许的最大宽度时，它将断开为新行

      <View style={{flex: 1, flexDirection: 'row', flexWrap: 'wrap'}}>
        <View style={{width: 50, height: 50, backgroundColor: 'powderblue'}} />
        <View style={{width: 50, height: 50, backgroundColor: 'skyblue'}} />
        <View style={{width: 50, height: 50, backgroundColor: 'steelblue'}} />
        <View style={{width: 50, height: 50, backgroundColor: 'skyblue'}} />
        <View style={{width: 50, height: 50, backgroundColor: 'steelblue'}} />
      </View>

---

希望它有帮助

很好，但还有一件更重要的事情，如果上面的代码被包装到视图/滚动视图组件中，那么我们也必须添加flex:1才能使其正常工作。