如何在循环中反应原生对齐视图？

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,

  }
});

我想让组件输出看起来像这个图像。

如何浮动View并排。 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'

  }