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

【问题标题】：How do you arrange shapes in React Native?你如何在 React Native 中排列形状？
【发布时间】：2022-02-15 01:15:18
【问题描述】：

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

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

【问题讨论】：

我建议将空白视为具有透明或白色背景颜色的框。
请提供足够的代码，以便其他人更好地理解或重现问题。

标签： javascript css reactjs react-native

【解决方案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,
  },
})

这产生了以下观点。

【讨论】：