logo标签列表

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

androidiosreact-nativeexpo
5
一个非常简单的视图：
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>
  );
}

我只是制作了一个视图，宽度为371，高度为477，然后记录其布局。当我在我的实际iPhone 5s设备上使用expo运行时，我得到以下输出:

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

这是正确的。但是当我在一个屏幕大小为1080x1920：420dpi的安卓Pixel 2模拟器上运行它时（我没有实际的安卓设备），我得到以下输出：

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

所以宽度和高度略有偏差。通常我会说这并不是很重要，因为它小于一个像素，但问题是对于我的应用程序来说，这似乎会导致非常丑陋的显示错误，其中一些应该无缝拼合的瓷砖之间有一些非常小的边距。

enter image description here

实际上，我不确定这是否是原因。然而，它似乎是一个非常可疑的候选者。有什么办法可以解决这个问题吗？

编辑：

更多详细信息以重现图像中的像素插值错误。正如我所说，本帖中描述的问题似乎是导致此问题的原因，但我不百分之百确定。无论如何，上述场景都非常奇怪。

因此，对于以下代码（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>
  );
}

我在安卓和iOS上得到了这些输出：

enter image description here

我可以通过使用 Expo 中的元素检查器（或者使用上面的日志记录方法）来验证问题是否发生，例如，1. 容器的大小不完全正确，而且我注意到一些网格单元格的大小也不正确，正如您在下面这些使用元素检查器的截图中所看到的：enter image description here。
那么你在真实设备上测试了，出现了同样的问题吗？另外，你能否添加一些关于这个问题的代码和样式，以便人们可以看到UI的逻辑并尝试回答它。 - Javascript Hupp Technologies
正如我在帖子中提到的，我没有真正的安卓设备，因此被迫使用安卓模拟器。所提供的代码也足以（理论上）重现问题，但这也取决于您所拥有的设备。我现在另外添加了一个更详细的版本，也能够重现出在JavascriptHuppTechnologies处出现奇怪行的错误。 - man zet
2个回答
4

你看到的这些小偏差是由于不同设备具有不同的像素密度。换句话说，它们在每平方英寸上拥有不同数量的像素。

当你为宽度/高度指定绝对值时，RN会自动对最近的像素进行调整以避免产生模糊的视觉效果，但这可能不完全符合你想制作完美网格的要求。

为了避免这种情况，你可以将单元格尺寸舍入到最近的像素。在上面的例子中，它应该是这样的：

import {PixelRatio} from 'react-native';    
const cell_size = PixelRatio.roundToNearestPixel(53);

你可以阅读有关PixelRatio的更多信息这里。
3
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接