Question

我尝试使用flexbox在本机中创建一个5x5网格框。目前我的代码只生成一行网格，我不知道为什么。

这是我的代码：

import React, { Component } from 'react';
import { View, Text, StyleSheet } from 'react-native';

class Board extends Component {
  render () {
    return (
      <View style={styles.container}>
        <View style={styles.rowContainer}>
          <View style={styles.box}></View>
          <View style={styles.box}></View>
          <View style={styles.box}></View>
          <View style={styles.box}></View>
          <View style={styles.box}></View>
        </View>
        <View style={styles.rowContainer}>
          <View style={styles.box}></View>
          <View style={styles.box}></View>
          <View style={styles.box}></View>
          <View style={styles.box}></View>
          <View style={styles.box}></View>
        </View>
        <View style={styles.rowContainer}>
          <View style={styles.box}></View>
          <View style={styles.box}></View>
          <View style={styles.box}></View>
          <View style={styles.box}></View>
          <View style={styles.box}></View>
        </View>
        <View style={styles.rowContainer}>
          <View style={styles.box}></View>
          <View style={styles.box}></View>
          <View style={styles.box}></View>
          <View style={styles.box}></View>
          <View style={styles.box}></View>
        </View>
        <View style={styles.rowContainer}>
          <View style={styles.box}></View>
          <View style={styles.box}></View>
          <View style={styles.box}></View>
          <View style={styles.box}></View>
          <View style={styles.box}></View>
        </View>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    flexDirection: 'column',
    alignItems: 'flex-start',
  },
  rowContainer: {
    flex: 1,
    flexDirection: 'row',
    alignItems: 'flex-start',
  },
  box: {
    flex: 1,
    height: 60,
    backgroundColor: 'red',
    borderWidth: 2,
    borderColor: 'black',
  }
});

export default Board;

这是输出：

如何让我的代码输出5x5网格框？

谢谢

Answer 1

从rowContainer中删除flex：1修复了问题但我并不完全确定原因

Answer 2

如果您在borderWidth和borderColor上使用container和不同的rowContainer，它将帮助您直观地了解并更好地了解flexBox如何呈现每个父/子组件

Answer 3

你可以尝试这个

import React, {
  Component
} from 'react';
import {
  View,
  Text,
  StyleSheet,
  TouchableHighlight
} from 'react-native';

class Sudoku extends Component {
  constructor(props) {
    super(props);
    this.state = {
      sudoku : [
        [1,2,3,4,5,6,7,8,9],
        [1,2,3,4,5,6,7,8,9],
        [1,2,3,4,5,6,7,8,9],
        [1,2,3,4,5,6,7,8,9],
        [1,2,3,4,5,6,7,8,9],
        [1,2,3,4,5,6,7,8,9],
        [1,2,3,4,5,6,7,8,9],
        [1,2,3,4,5,6,7,8,9],
        [1,2,3,4,5,6,7,8,9]
      ]
    }
  }

  increment = (v, i) => {
    let newBoard = [...this.state.sudoku];
    newBoard[v][i]++
    if (newBoard[v][i] === 10) {
      newBoard[v][i] = 0
    }
    this.setState({
      sudoku: newBoard
    })
  }

  render() {
    return (
      <View>
        {
          this.state.sudoku.map((item, v) => {
            return (
              <View style={styles.row} key={v}>
                {
                  item.map((num, i) => {
                    return (
                    <TouchableHighlight key={i} onPress={() => this.increment(v, i)}>
                      <View style={styles.box}>
                        <Text>{num}</Text>
                      </View>
                    </TouchableHighlight>)
                  })
                }
              </View>
            )
          })
        }
      </View>
    )
  }
}

const styles = StyleSheet.create({
  row: {
    flexDirection: 'row',
    margin: 1
  },
  box: {
    width: 40,
    height: 40,
    backgroundColor: 'orange',
    justifyContent: 'center',
    alignItems: 'center',
    margin : 1,
    borderRadius: 5
  }
});


export default Sudoku;

使用反应原生flexbox样式创建视图组件网格的Bug

3 个答案: