Как выровнять вид в реагировать родной в петле?

Question

Вот мой код компонента React Native.

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

export default class AnatomyExample extends Component {
  render() {
    let data = [1,2,3,4,5,6,7,8];
    return (
      <View style={styles.main}>
        {data.map(this.renderView)}
      </View>


    );
  }

  renderView(d){
    return (
     <View style={styles.child}>
      <Text>{d}</Text>
       </View>
      )
  }
}



const styles = StyleSheet.create({
  main: {
    borderRadius: 4,
    borderWidth: 1,
    borderColor: '#d6d7da',
  },
  child: {
    borderWidth:1,
    borderColor:'blue',
    width:150,
    height:150,

  }
});

Я хочу, чтобы вывод компонента был похож на это изображение.

Как плавать Вид рядом. float:left; будет работать в html css, но не уверен, как сделать это в реагировать на нативный.

Answer 1

Вы можете добавить стили, как это, если вы хотите 4 элемента в строке , иначе вы можете указать пользовательская ширина

import {Dimensions} from 'react-native';

const {width, height} = Dimensions.get('window')
main: {
    flexDirection: 'row',
    flexWrap: 'wrap',
    borderRadius: 4,
    borderWidth: 1,
    borderColor: '#d6d7da',
  },
  child: {
    margin: 5,
    borderWidth:1,
    borderColor:'blue',
    width: width / 4 - 12, // ... DeviceWidth / 4 - (marginLeft + marginRight + borderLeft + borderRight)
    height: 50,
    backgroundColor: 'gray'

  }