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,
  }
});