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

【问题标题】：styled-components size and performance in react-nativereact-native 中的样式化组件大小和性能
【发布时间】：2019-12-14 04:53:10
【问题描述】：

我刚开始尝试使用 react native 并且正在关注一些官方文档。

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

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

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

此报价仅适用于宽度和高度吗？是否有默认的像素密度转换或者可以实现？

Q2：样式化组件在 React Native 中是否会影响性能？我不确定幕后发生了什么，我更愿意尽可能地使用原生组件。

【问题讨论】：

样式不完全相同。您将不得不担心不同类型的设备。默认情况下，它们不响应。所有尺寸都是少单位，它们不限于宽度和高度。性能的东西是“谷歌的”。 what heppens ... 3000? 不知道你在问什么。
样式化的组件不允许使用 'padding: 20'。它强制使用“填充：20px”。我正在更新 3000 x 1000 部分

标签： css react-native styled-components

【解决方案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)，超级酷。有关更多信息，请阅读他们的文档。

您还可以阅读这篇很棒的 Medium 博客文章 Scaling React Native apps for Tablets

【讨论】：

谢谢，它为反应原生的尺寸提供了很好的参考。尽管我仍在研究有关 react-native + styled-components 的一些信息。也许有一个包或其他东西可以开箱即用

【解决方案2】：

回答你的第一个问题

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

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

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

对于 Android 设备，为了简化整个事情，由于 android 生态系统有更多具有不同分辨率的设备，因此 react-native 团队决定坚持 Apple 的标准，框架为我们决定适用哪些最佳文件和分辨率，是 1x、2x 或 3x。

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

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

React Native Responsive Font Size

回答你的第二个问题

一点也不。

至少我们已经在使用 react-native 和 JS 时对性能造成了更大的影响。我们编写的 JS 代码（以及相关的样式化组件代码）用于操作特定平台的已编译代码和本机代码，因此所有渲染都接近金属完成，因此具有非常好的性能。应用程序必须运行的 JS 代码显然不如使用所有原生代码编写的性能，但它的速度足够快，最终甚至不会产生任何影响。

【讨论】：

【解决方案3】：

我刚刚发现 styled-components/native 模块中使用了一个包 (https://github.com/styled-components/css-to-react-native)。

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

【讨论】：