Javascript React Native-创建网格

下面的代码生成一行10个正方形，其中包含随机数。我想把它做成10行10列的网格，但我被困在这里了。我想把一行中的列限制为10列。因此，如果var限制为40，它将创建4行10列。60将创建6行10列，以此类推

import React, { Component } from 'react';
import { View, Text, TouchableOpacity } from 'react-native';
import { connect } from 'react-redux';
import { Decrease, Increase, GetScore } from '../actions';
import { CardSection, Square } from './common';

class TableGenerator extends Component {
  clickable(sq) {
    this.props.Decrease(sq);
    console.log(this.props.score);
  }

  generateRandom() {
    // Random number generator
    function* rand() {
      while (true) {
        yield Math.floor(Math.random() * 100) + 1;
      }
    }
    const it = rand();
    const nums = [];
    const limit = 10;
    for (let i = 0; i < limit; i++) {
      nums.push(it.next().value);
    }
    return nums.map((sq, i) =>
      <TouchableOpacity
        key={i}
        onPress={() => this.clickable(sq)}
      >
        <Square style={{ height: 30, width: 30 }}>
          {nums[i]}
        </Square>
      </TouchableOpacity>
    );
  }

  render() {
    return (
      <View>
        <CardSection style={{ justifyContent: 'center' }}>
          {this.generateRandom()}
        </CardSection>
        <CardSection>
          <Text>Current Score: </Text>
          <Text>{this.props.score}</Text>
        </CardSection>
      </View>
    );
  }
}

const mapStateToProps = state => {
  return {
    score: state.scoreReducer
  };
};

export default connect(mapStateToProps, { Decrease, Increase, GetScore })(TableGenerator);

import React，{Component}来自'React'；
从“react native”导入{View，Text，TouchableOpacity}；
从'react redux'导入{connect}；
从“../actions”导入{减少、增加、获取分数}；
从“./common”导入{CardSection，Square}；
类TableGenerator扩展组件{
可点击（sq）{
这个.道具.减少量（sq）；
console.log（this.props.score）；
}
generateradom（）{
//随机数发生器
函数*rand（）{
while（true）{
产量数学下限（数学随机（）*100）+1；
}
}
常数it=rand（）；
常量nums=[]；
常数限值=10；
for（设i=0；i
这个。可点击（sq）}
>
{nums[i]}
);
}
render（）{
返回(
{this.generateradom（）}
当前分数：
{this.props.score}
);
}
}
常量mapStateToProps=状态=>{
返回{
分数：state.scoreReducer
};
};
导出默认连接（MapStateTops，{减少，增加，获取分数}）（TableGenerator）；

为偶然发现此线索的其他人发布快速答案

您可以简单地使用外部容器来限制宽度，这样子

square

s在填充整行后将被强制进入下一行

外部容器中的渲染功能

<Container style={width: '300px'}>
  // iterate the and render the children squares
</Container>

<Square style={width: '30px', height: '30px', float: 'left', display: 'inline-block'}>
  // content
</Square>

---

我在我的宠物项目中碰巧有类似的东西，你可以看到它在运行。

我只需使用一个外部容器来限制宽度，然后强制将多余的方块放到下一行。好的。谢谢做了并指定了flexWrap。发布了答案。我没有使用flexWrap。但差别不大。