React native 使用react原生flexbox样式创建视图网格组件时出现错误

我正在尝试使用flexbox在react native中创建一个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;

import React，{Component}来自'React'；
从“react native”导入{View，Text，StyleSheet}；
类板扩展组件{
渲染（）{
返回(
);
}
}
const styles=StyleSheet.create({
容器：{
弹性：1，
flexDirection:'列'，
alignItems:'flex start'，
},
行容器：{
弹性：1，
flexDirection:'行'，
alignItems:'flex start'，
},
方框：{
弹性：1，
身高：60，
背景颜色：“红色”，
边界宽度：2，
边框颜色：“黑色”，
}
});
导出默认板；

以下是输出：

如何使我的代码输出为5x5格的方框

---

感谢您

从rowContainer中删除flex:1修复了问题，尽管我不完全确定如果您在

容器

和

rowContainer

上使用

边框宽度

和不同的

边框颜色

s，为什么

，它将帮助您可视化并更好地理解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;

import-React{
组成部分
}从"反应",；
进口{
看法
文本，
样式表，
可触摸高光
}从“反应本机”；
类数独扩展组件{
建造师（道具）{
超级（道具）；
此.state={
数独：[
[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]
]
}
}
增量=（v，i）=>{
让newBoard=[…this.state.sudoku]；
新船[v][i]++
如果（新板[v][i]==10）{
新板[v][i]=0
}
这是我的国家({
数独：新手板
})
}
render（）{
返回(
{
this.state.sudoku.map（（项，v）=>{
返回(
{
item.map（（num，i）=>{
返回(
这个.增量（v，i）}>
{num}
)
})
}
)
})
}
)
}
}
const styles=StyleSheet.create({
行：{
flexDirection:'行'，
保证金：1
},
方框：{
宽度：40，
身高：40，
背景颜色：“橙色”，
为内容辩护：“中心”，
对齐项目：“居中”，
差额：1，
边界半径：5
}
});
导出默认数独；

我可能会错过一些东西，但是

容器

和

行容器

规则不应该有

display:flex

。。。。另外，

容器

作为主要的flexbox容器，它的

flex:1

不起任何作用。。有趣的问题。你也可以试试这个，我发现它很有帮助。