react native中样式化组件的大小和性能

Question

我刚刚开始尝试react native，并且正在遵循一些官方文档。

我从官方文档的样式和大小部分了解到，样式系统与css非常相似，但并不完全相同。(?)

Q1：我可以只使用样式化的组件并使用“填充：20px”等，而不用担心不同类型的设备吗？
我问这个，因为文档说：

React Native中的所有维度都是无单位的，表示与密度无关的像素。

此报价仅针对宽度和高度吗？。默认情况下是否有像素密度转换，或者是否可以实现？

Q2：样式化的组件在反应原生中有性能冲击吗？我不知道幕后发生了什么，我更喜欢尽可能多地使用原生组件。

Answer 1

我刚刚发现有一个包（https://github.com/styled-components/css-to-react-native）用于样式组件/本机模块。

这是解释：https://www.styled-components.com/docs/basics#react-native

Answer 2

回答您的第一个问题

他们所说的无单位是指像素密度是根据目标设备像素密度计算的。因此，1px的实际设备尺寸将根据设备的像素密度而有所不同，这意味着视网膜显示器中的2px和较新的“plus”尺寸的设备上的3px。

这里有一个很好的表格来说明1px在每个苹果设备中的含义：

https://developer.apple.com/design/human-interface-guidelines/ios/icons-and-images/image-size-and-resolution/

对于android设备，为了简化整个事情，因为Android生态系统有更多不同分辨率的设备，react-native团队决定坚持苹果的标准，框架为我们决定什么是最佳文件和分辨率，是1x，2x还是3x。

本质上，这一切都意味着在您的样式定义中，您将使用像素作为点。如果您的原始图像是非视网膜显示器的100像素，只需将其定义为100px，并提供一个200px的版本，文件名末尾附加@2x。React将知道要使用什么文件。

查看此答案以获取更多信息：

React Native响应字体大小

回答第二个问题

一点也不。

至少在使用 react-native 和 JS 时，我们已经没有更多的性能下降。我们编写的JS代码（以及就此而言的样式化组件代码）用于操作特定平台的编译和本机代码，因此所有渲染都是在接近金属的情况下完成的，因此具有非常好的性能。应用程序必须运行的JS代码显然不如用所有本机代码编写时的性能，但它足够快，甚至最终没有区别。

Answer 3

首先，你提到“React Native中的所有维度都是无单位的”，但这并不完全正确，因为它们是用像素表示的。

您可以执行简单的数学运算以跨设备更改这些固定值。例如，假设您有一些可以使用的卡组件：

js prettyprint-override">import { Dimensions } from 'react-native';
const { width } from Dimensions.get('window');

您的风格：

{
  height: width * 0.3,
  width: width * 0.5,
}

相反，您可以使用我发现的这个令人惊叹的软件包，它对于扩展平板电脑非常好且非常棒react-native-size-事项

你可以做这样的事情：

import { ScaledSheet } from 'react-native-size-matters';

const styles = ScaledSheet.create({
  container: {
    width: '100@s',
    height: '200@vs'
  }
});

其中100@s表示Scale（100）和200@vs表示verticalScale（200），超级酷。有关更多信息，请阅读他们的文档。

您还可以阅读这篇令人敬畏的中型博客文章 扩展反应 平板电脑的本机应用程序