Question

如何为React Native创建类似于图像的框格，这些框将填充手机的所有屏幕尺寸？

对于每个框，如果用户获得了滑动手势，它将从屏幕上消失，但是所有未触摸的框将保持在相同的坐标/位置。如果所有框都消失了，那么程序将继续。

到目前为止，我已经尝试过使用此方法显示框：`

import React from "react";
import {
  StyleSheet,
  Text,
  View,
  Dimensions,
  StatusBar,
  TouchableOpacity
} from "react-native";

export default class App extends React.Component {
  componentDidMount() {
    StatusBar.setHidden(true);
  }
  createBoxes = numberOfBoxes => {
    let boxes = [];
    // Outer loop to create parent
    for (let i = 0; i < numberOfBoxes; i++) {
      boxes.push(
        <TouchableOpacity
          key={i}
          style={styles.box}
          onPress={() => {
            console.log("number "+ i);
          }}
        >
          <Text>{i}</Text>
        </TouchableOpacity>
      );
    }

    return boxes;
  };
  render() {
    const boxHeight = 29;
    const height = Math.ceil(Dimensions.get("window").height);

    let totalBox = Math.round(height / boxHeight) * 9; //9 is the number of box on screen
    console.log(height, boxHeight, totalBox);

    return <View style={styles.container}>{this.createBoxes(totalBox)}</View>;
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    flexDirection: "row",
    backgroundColor: "#fff",
    flexWrap: "wrap",
    alignItems: "flex-start"
  },
  box: {
    width: "10%",
    height: 25,
    margin: 2,
    backgroundColor: "powderblue"
  }
});

` 但是对于不同的电话比例，结果并不正确（16：9的结果还可以，但是18：9的电话底部还有一些空间）

16：9的结果非常适合屏幕（Android）：

但是在iOS中，宽度并不完美，右侧仍然有一些空白：

如何实现？

Answer 1

您需要通过添加以下代码来更新容器样式，如下所示：

justifyContent: "space-evenly"

请在下面找到更新的代码：

import React from "react";
import {
  StyleSheet,
  Text,
  View,
  Dimensions,
  StatusBar,
  TouchableOpacity
} from "react-native";

export default class App extends React.Component {
  componentDidMount() {
    StatusBar.setHidden(true);
  }
  createBoxes = numberOfBoxes => {
    let boxes = [];
    // Outer loop to create parent
    for (let i = 0; i < numberOfBoxes; i++) {
      boxes.push(
        <TouchableOpacity
          key={i}
          style={styles.box}
          onPress={() => {
            console.log("number "+ i);
          }}
        >
          <Text>{i}</Text>
        </TouchableOpacity>
      );
    }

    return boxes;
  };
  render() {
    const boxHeight = 29;
    const height = Math.ceil(Dimensions.get("window").height);

    let totalBox = Math.round(height / boxHeight) * 9; //9 is the number of box on screen
    console.log(height, boxHeight, totalBox);

    return <View style={styles.container}>{this.createBoxes(totalBox)}</View>;
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    flexDirection: "row",
    backgroundColor: "#fff",
    flexWrap: "wrap",
    alignItems: "flex-start",
    justifyContent: "space-evenly"
  },
  box: {
    width: "9%",
    height: 25,
    margin: '0.5%',
    aspectRatio: 1,
    backgroundColor: "powderblue"
  }
});

当滑动时会反应本机网格的方格，这些方格会填满所有手机屏幕的大小

1 个答案: