你如何在 React Native 中排列形状？

Question

我正在尝试按照图像中的样子排列正方形，但我无法真正弄清楚整个 flex 和定位的东西：正方形

这可能真的很简单，但我就是想不通。

Answer 1

好吧，这是你的图片的快速版本。

import React from "react"
import { StyleSheet, View } from "react-native"

export const Test = () => {
  return (
    <View style={styles.container}>
      <View style={styles.row}>
        <View style={[styles.square]} />
        <View style={[styles.square]} />
        <View style={[styles.square, { backgroundColor: "yellow" }]} />
        <View style={[styles.square, { backgroundColor: "turquoise" }]} />
      </View>
      <View style={styles.row}>
        <View style={[styles.square, { backgroundColor: "red" }]} />
        <View style={[styles.square, { backgroundColor: "blue" }]} />
        <View style={[styles.square, { backgroundColor: "green" }]} />
        <View style={[styles.square, { backgroundColor: "violet" }]} />
        <View style={[styles.square, { backgroundColor: "yellow" }]} />
      </View>
      <View style={[styles.square, { backgroundColor: "lightgrey", height: 25, width: 300 }]} />
    </View>
  )
}

const styles = StyleSheet.create({
  container: {
    display: "flex",
  },
  row: {
    flexDirection: "row",
  },
  square: {
    width: 60,
    height: 60,
  },
})

这产生了以下观点。