时间戳

首页 > 解决方案 > 反应填充所有手机屏幕尺寸的本机网格，滑动时将消失

android - 反应填充所有手机屏幕尺寸的本机网格，滑动时将消失

问题描述

网格框

我怎样才能像 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）： 16:9 盒子

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

如何做到这一点？

标签： androidiosreactjsreact-native

解决方案

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

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

推荐阅读