Как сделать сетку квадратов с помощью React Native и Flexbox?

Question

Я хотел бы создать следующую сетку с React Native, используя Flexbox.

Я попытался создать эту сетку с кодом ниже (см. 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,
  }
});