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

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个元素，则可以指定自定义宽度

#include<string.h>
#include<stdio.h>
int main()
{
    char test[] = "Hello there\n"
              "World, my name\n"
              "Is bob\n";

    char *p;
    p = strtok(test, "\n");

    while(p) {
        printf("%s\n", p);
        p = strtok(NULL, "\n");
    }

    return 0;
}