react-native - 如何使用 React Native 和 Flexbox 制作正方形网格？

Question

我想使用 Flexbox 使用 React Native 创建以下网格。

我尝试使用以下代码创建此网格（有关代码和工作版本，请参见snack.expo.io），但我得到的矩形间距不正确，如下所示：

import * as React from 'react';
import { Text, View, StyleSheet } from 'react-native';
import Constants from 'expo-constants';


const Cell = () => {
  return (
    <View
      style={styles.cell_container}
    >
      <View
        style={styles.cell}
      >
      </View>
    </View>
  )
}

const Row = () => {
  return (
    <View style={styles.row_container}>
        <Cell/>
        <Cell/>
        <Cell/>
        <Cell/>
        <Cell/>
        <Cell/>
        <Cell/>
        <Cell/>
        <Cell/>
        <Cell/>
    </View>
  )
}


const Table = () => {
  return (
    <View style={styles.table_container}>
        <Row/>
        <Row/>
        <Row/>
        <Row/>

    </View>
  )
}




export default class App extends React.Component {
  render() {
    return (
        <Table/>
    );
  }
}

const styles = StyleSheet.create({
  table_container:{
    flex: .5,
    flexDirection: "column",
    alignSelf: "stretch",
    paddingTop: Constants.statusBarHeight,
    justifyContent: 'center',
  },
  row_container: {
    flex: 1,
    flexDirection: "row",
    backgroundColor: "white",
    alignItems: "center",
    justifyContent: "center",
  },
  cell_container: {
    flexDirection: "row",
    height: 20,
    width: 20,
  },
  cell:{
    backgroundColor: "#ebedf0",
    flex: .5,
  }
});

Answer 1

不要考虑表格。Flexbox 不是表格布局。

export default class App extends React.Component {
  render() {
    return (
      <View>

        <View style={styles.top_container}>

        </View>

        <View style={styles.flexrow_container}>
            <View style={styles.cell}></View>
            <View style={styles.cell}></View>
            <View style={styles.cell}></View>
        </View>

        <View style={styles.flexrow_container}>
            <View style={styles.cell}></View>
            <View style={styles.cell}></View>
            <View style={styles.cell}></View>
        </View>

        <View style={styles.flexrow_container}>
            <View style={styles.cell}></View>
            <View style={styles.cell}></View>
            <View style={styles.cell}></View>
        </View>

      </View>
    );
  }
}


const styles = StyleSheet.create({
  top_container:{
    paddingTop: Constants.statusBarHeight,
    backgroundColor: 'red',
  },
  flexrow_container: {
    flexDirection: 'row',
    backgroundColor: 'blue',
    justifyContent: 'center',
  },
  cell:{
    backgroundColor: "#ebedf0",
    height: 20,
    width: 20,
    margin: 5,
  }
});

Answer 2

问题出在flex: 0.5. 尝试：

const styles = StyleSheet.create({
  table_container:{
    paddingTop: Constants.statusBarHeight,
  },
  row_container: {
    flexDirection: "row",
    backgroundColor: "white",
    justifyContent: "center",
  },
  cell:{
    backgroundColor: "#ebedf0",
    margin: 2,
    height: 20,
    width: 20,
  }
});