android - React Native：Android 未正确设置宽度和高度 []

问题描述

一个非常简单的视图：

import React from "react";
import { View } from "react-native";

export default function App() {
  return (
    <View
      onLayout={(layout) => {
        console.log(layout.nativeEvent);
      }}
      style={{
        width: 371,
        height: 477,
      }}
    ></View>
  );
}

所以我只是用width=371和height=477创建一个视图，然后记录它的布局。当我在我的实际 iPhone 5s 设备上使用 expo 运行它时，我得到以下输出：

{
  "layout": Object {
    "height": 477,
    "width": 371,
    "x": 0,
    "y": 0,
  },
  "target": 3,
}

哪个是对的。但是当我在屏幕尺寸为 1080x1920:420dpi 的 android pixel 2 模拟器上运行它时（我没有实际的 android 设备），我得到以下输出：

Object {
  "layout": Object {
    "height": 476.952392578125,
    "width": 371.047607421875,
    "x": 0,
    "y": 0,
  },
  "target": 3,
}

所以宽度和高度是略的。通常我会说这并不重要，因为它小于一个像素，但问题是对于我的应用程序，这似乎会导致看起来非常难看的显示错误，其中一些应该无缝组合在一起的图块有一些非常小利润：

其实我不是百分百确定这是不是这个原因。然而，在我看来，这是一个非常可疑的候选人。知道如何解决这个问题吗？

编辑：

更多细节可重现图像中的像素插值误差。正如我所说，这篇文章中描述的问题对我来说似乎是造成这种情况的原因，但我不确定。然而，在所有情况下，上述情况都非常奇怪。

因此，对于以下代码（应无缝添加在一起的 7x9 53 像素大视图网格）：

import React from "react";
import { View } from "react-native";

export default function App() {
  let cell_size = 53;
  let width = 7;
  let height = 9;

  let rows = [];
  for (let i = 0; i < height; i++) {
    let row_elms = [];
    for (let j = 0; j < width; j++) {
      row_elms.push(
        <View
          key={"key" + j + "_" + i}
          style={{
            width: cell_size,
            height: cell_size,
            backgroundColor: "white",
          }}
        ></View>
      );
    }
    rows.push(
      <View
        key={"row" + i}
        style={{
          width: cell_size * width,
          height: cell_size,
          flexDirection: "row",
        }}
      >
        {row_elms}
      </View>
    );
  }

  return (
    <View
      style={{
        justifyContent: "center",
        alignItems: "center",
        height: "100%",
        width: "100%",
        backgroundColor: "black",
      }}
    >
      <View style={{ width: cell_size * width, height: cell_size * height }}>
        {rows}
      </View>
    </View>
  );
}

我在android vs ios上得到这个输出：

然后，我可以例如通过使用 expo 内置元素检查器（或者使用上面的日志记录方法）来验证问题是否发生，即 1. Container 的大小不完全正确，而且我注意到一些网格单元也没有正确的大小，正如您在这些使用元素检查器的屏幕截图中看到的那样：

标签： androidiosreact-nativeexpo

android - React Native：Android 未正确设置宽度和高度 []

问题描述

解决方案

推荐阅读