react-native 中的组件样式在应用程序中呈现不一致

Posted 2023-03-15

【中文标题】react-native 中的组件样式在应用程序中呈现不一致

【英文标题】：Component styling in react-native not rendering consistently within application

【发布时间】：2016-05-20 17:04:22

【问题描述】：

在 iphone 6 或 6s 上查看我的 react-native 应用程序时，我的一些组件以不同的大小呈现到屏幕上，或者在这些状态之间不可见或闪烁。见下图borderWidth: StyleSheet.hairlineWidth（我的设备截图）

确保我的组件样式在我的 iOS 应用程序中一致呈现的最佳方法是什么？

更新： 此问题不仅与borderWidth 相关...我能够在我的设备上使用View 组件backgroundColor 和height:1 进行复制。

在此处查看基本示例：https://rnplay.org/apps/xUYNIQ（模拟器中可见的问题与我在 iphone6 上的应用程序中遇到的问题相同）

【问题讨论】：

我已经尝试根据PixelRatiocomponent facebook.github.io/react-native/docs/pixelratio.html 动态调整宽度，但是 6plus 和 6splus 共享相同的比率 3。（6 plus 是呈现不同宽度的设备）

你的模拟器放大了吗？我在按比例缩小的模拟器上也有同样的体验，但在没有缩放的情况下也能正常工作。

这个问题出现在我的设备上。在您的设备上运行和查看rnplay.org/apps/xUYNIQ

你试过使用 StyleSheet.hairlineWidth 吗？它应该始终是整数像素

我已经尝试过 Stylesheet.hairlineWidth 以及应用于该数字的各种形式的逻辑 - 没有一个可以解决问题

【参考方案1】：

这可能是精度损失渲染问题。

我遇到了这样的问题。我写了一个函数来转换不同设备的样式，发生了一些奇怪的事情：bottomBorder 变得格外粗体。

PixelRatio 获取设备像素比信息，Dimensions 获取设备宽度和高度，但Dimensions.get('window').width * PixelRatio.get() 不等于 Apple Device 数据。

在我使用PixelRatio之前，我将其更改为parseInt(PixelRatio)。它不会有任何问题，但在iPhone 6和6plus上组件会更小。

【讨论】：

虽然我非常感谢您查看@Oboo Chin，但我认为我们正在处理不同的问题......在我的应用程序中，相同的组件以不同的大小呈现。我理解组件在不同设备上的外观会有所不同，但它们不应在我的应用程序中闪烁并以不同的大小呈现。

@MaxwellLasky 我将您的代码复制到我的项目中，它在 iPhone 5s 模拟器和我的 iPod touch 5 上运行良好。只有当它处于 3/1 模式时，我才能在 iPhone 6s plus 模拟器上重现它。我已经检查了您的demo 并将“高度”属性更改为 1/2/3，它仍然表现不同。您是否将“高度”属性更改为整数偶数并在 100% 大小的模拟器或真实设备上检查它？