リアクションネイティブ - グリッドを作成する

Question

次のコードは、乱数を含む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); 

Answer 1

このスレッドにつまずく他の人のための簡単な回答を投稿します。

外側のコンテナを使用して幅を制限するだけで、子供のsquareが行全体を満たしてから次の行に移動するようにすることができます。外側の容器に

私は私のペットプロジェクトに似たものを持って起こっ機能

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

squareコンポーネントでレンダリングする機能

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

レンダリング、あなたはアクションhereでそれを見ることができます。