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

Posted 2021-04-21

我正在尝试使用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网格框？

谢谢

答案

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

另一答案

如果你在borderWidth和borderColors上使用container和不同的rowContainers，它将帮助你可视化并更好地理解flexBox如何渲染每个父/子组件

另一答案

你可以尝试这个

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;