반응-Native FlexDirection: 여러 줄로 '행'

반응-Native FlexDirection: 여러 줄로 '행'

어떻게 할 수 있는 방법이 있는지 알고 싶다.flexDirection: 'row'여러 줄에 걸쳐서왜냐하면 지금 내가 10개의 물체를 연속해서 가지고 있다면 non은 두 번째 줄에 갈 것이기 때문이다.이것은 내가 다른 두 개의 문서를 추가한 문서의 예다.<View>요소들

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);

사용할 수 있다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>

https://developer.mozilla.org/en-US/docs/Web/CSS/flex-wrap

도움이 되길 바래.

참조URL: https://stackoverflow.com/questions/50994747/react-native-flexdirection-row-with-multiple-lines