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은 전체 행을 채우면 강제로 다음 행으로 가게됩니다. 외부 용기에

내 애완 동물 프로젝트에서 유사한 무언가가 일어난 기능

<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 - 그리드 만들기

답변

관련 문제