React-Native - 创建网格

以下代码生成一行10个正方形，其中包含随机数。我试图以某种方式使它成为10行10列的网格，但我卡在这里。我想限制在一行中的列为10.因此，如果var限制为40，它会创建4行10列。 60会创建6行10列等React-Native - 创建网格

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);

来源

2017-01-30 Wasteland

我只是简单地使用外部容器来限制宽度，并强制多余的方块到下一行。 –

好的。谢谢。做了它并指定了flexWrap。 – Wasteland

发布了一个答案。我没有使用flexWrap。但这并没有太大的区别。 –

发布一个快速的答案为其他人谁绊倒这个线程。

您可以简单地使用一个外部容器来限制宽度，以便孩子square s在他们填满整行后将被强制进入下一行。

在外部容器渲染功能

<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 。

来源

2017-01-31 01:43:58

React-Native - 创建网格

回答

相关问题