Question

我刚刚开始尝试使用react native，并遵循了一些官方文件。

我从官方文档的style和size部分中了解到，样式系统与CSS非常相似，但并不完全相同。（？）

第1季度：我可以只使用样式化的组件并使用'padding：20px'之类的东西而不必担心其他类型的设备吗？
我问这个，因为文档说：

React Native中的所有尺寸都是无单位的，并且代表与密度无关的像素。

此报价仅适用于宽度和高度吗？默认情况下是否存在像素密度转换或可以实现？

第二季度：样式化的组件是否会对本机响应产生性能影响？我不确定到底发生了什么，我宁愿尽可能多地使用本机组件。

Answer 1

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

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

import { Dimensions } from 'react-native';
const { width } from Dimensions.get('window');

您的风格：

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

您可以改用我发现的这个令人赞叹的软件包，它对于缩放平板电脑react-native-size-matters来说非常好而且很棒

您可以执行以下操作：

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)，太酷了。有关更多信息，请阅读他们的文档。

您还可以阅读这篇很棒的中型博客帖子Scaling React Native apps for Tablets

Answer 2

我刚刚发现样式组件/本地模块中使用了一个软件包（https://github.com/styled-components/css-to-react-native）。

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

Answer 3

回答第一个问题

“无单位”的意思是像素密度是根据目标设备的像素密度计算得出的。因此，实际像素的大小会根据设备的像素密度而变化1px，这意味着在视网膜显示屏中为2px，在较新的“加大”尺寸的设备中为3px。

这里有一张漂亮的表格，说明每台Apple设备中1px的含义：

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

对于Android设备，为简化整个过程，由于android生态系统中有更多具有不同分辨率的设备，因此反应本地团队决定坚持使用Apple的标准，而框架为我们确定了最适合的文件和分辨率，是1倍，2倍或3倍。

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

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

React Native Responsive Font Size

回答第二个问题

一点也不。

至少在使用React-native和JS方面已经没有更多的性能影响。我们编写的JS代码（以及与此相关的样式化组件代码）用于操纵针对特定平台的编译后的本机代码，因此所有渲染均接近金属，因此具有很好的性能。该应用程序必须运行的JS代码显然比用所有本机代码编写的性能要差，但是它的速度足够快，甚至最终都不会有所作为。

样式化组件的大小和响应本机性能

3 个答案: