如何在React Native循环中对齐视图？

Question

Here is my React Native component code.

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,

  }
});

I want to make component output look like this image.

How to float View side by side. float:left; would work in html css but not sure how to make it in react native.

Answer 1

You can add the styles like this, if you want 4 elements in a row else you can specify custom width

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'

  }