# @cssxjs/css-to-react-native 中文文档

规范地址：https://npmcn.com/package/%40cssxjs/css-to-react-native/

版本：3\.2\.0-2
npm 元数据更新时间：2026-01-25T14:00:43.259Z
中文译文更新时间：2026-11-11T03:56:54.341Z
软件包许可：MIT

本文由上游 README 翻译，可能存在偏差，请结合原文核对 API、命令与配置。版权与许可归原作者所有。

原始 npm 页面：https://www.npmjs.com/package/%40cssxjs/css-to-react-native
原文对照：https://npmcn.com/package/%40cssxjs/css-to-react-native/?lang=original
项目主页：https://github.com/styled-components/css-to-react-native#readme
源码仓库：https://github.com/styled-components/css-to-react-native

## 关键信息（来自 npm 元数据）

- 包体积（解压后）：178 kB，49 个文件
- 模块格式：CommonJS
- TypeScript 类型：包内自带
- 运行依赖：3 个
- 首次发布：2025-11-04T19:57:49.965Z
- 最新版本发布：2026-01-25T14:00:43.097Z
- 近 30 天下载量：5774（2026-10-11 至 2026-11-09，npm 官方下载统计）
- 已发布版本数：3（近 12 个月 2 个）

## 中文简介

将 CSS 文本转换为本地样式表对象

## 安装

```sh
npm install @cssxjs/css-to-react-native
```

也可以使用：`pnpm add @cssxjs/css-to-react-native`、`yarn add @cssxjs/css-to-react-native`、`bun add @cssxjs/css-to-react-native`

## README

# css- to- react-inative (英语)

将 CSS 文本转换为 React Native 样式表对象.

[试试看](https://csstox.surge.sh/)

```css
font-size: 18px;
line-height: 24px;
color: red;
```

```js
{
  fontSize: 18,
  lineHeight: 24,
  color: 'red',
}
```

将所有类似数字的值转换为数字,将字符串转换为字符串.

自动将间接值转换到它们的回放原生等同物.

```css
text-shadow-offset: 10px 5px;
font-variant: small-caps;
transform: translate(10px, 5px) scale(5);
```

```js
{
  textShadowOffset: { width: 10, height: 5 },
  fontVariant: ['small-caps'],
  // Fixes backwards transform order
  transform: [
    { translateY: 5 },
    { translateX: 10 },
    { scale: 5 },
  ]
}
```

还允许用快手值.

```css
font: bold 14px/16px "Helvetica";
margin: 5px 7px 2px;
```

```js
{
  fontFamily: 'Helvetica',
  fontSize: 14,
  fontWeight: 'bold',
  fontStyle: 'normal',
  fontVariant: [],
  lineHeight: 16,
  marginTop: 5,
  marginRight: 7,
  marginBottom: 2,
  marginLeft: 7,
}
```

短手只接受React中支持的值,所以 `background` 只能接受一种颜色, `backgroundColor`

也有人支持: `box-shadow` 切换成 `shadow-` 属性。 请注意,这些只在iOS上工作.

#### 简记

`border{Top,Right,Bottom,Left}` 手写不支持, 因为 `borderStyle` 无法适用于个别边界.

# API 密码

API主要用于执行者. 然而,主要的API可能对未执行者有用. 主 API 是一组 `[property, value]` tu.

```js
import transform from 'css-to-react-native';
// or const transform = require('css-to-react-native').default;

transform([
  ['font', 'bold 14px/16px "Helvetica"'],
  ['margin', '5px 7px 2px'],
  ['border-left-width', '5px'],
]); // => { fontFamily: 'Helvetica', ... }
```

我们不提供一种方法 来得到这些风格的拖拉 在这个图书馆, 所以你需要自己做到这一点。 我期望大多数人会使用 postCSS 或者另一个CSS 解析器。 你应该尽量避免得到这些与 `string.split`,因为这有很多边缘案例(在评论中出现分号等)

对于执行者,还有少数额外的API可用.

这些是针对特定用途的,大多数人应该只是使用上面的API.

```js
import { getPropertyName, getStylesForProperty } from 'css-to-react-native';

getPropertyName('border-width'); // => 'borderWidth'
getStylesForProperty('borderWidth', '1px 0px 2px 0px'); // => { borderTopWidth: 1, ... }
```

如果您希望选择退出某些缩写转换, 骆驼中的一系列属性名称 案件可以作为第二个论据转交给 `transform`。 。 。 .

```js
transform([['border-radius', '50px']], ['borderRadius']);
// { borderRadius: 50 } rather than { borderTopLeft: ... }
```

这也可以通过提出第三个论点来实现, `false` 改为 `getStylesForProperty`。 。 。 .

## 许可证

获得麻省理工学院许可,版权为2019年克里斯特·卡里,雅各布·帕克和马克西米利安·斯托伊伯.

见 [利比里亚](https://npmcn.com/package/%40cssxjs/css-to-react-native/LICENSE.md) 更多信息.

## 常见问题

### @cssxjs/css-to-react-native 是什么？

将 CSS 文本转换为本地样式表对象

### 如何安装 @cssxjs/css-to-react-native？

在项目目录运行 npm install @cssxjs/css-to-react-native，或使用 pnpm add / yarn add / bun add。

### @cssxjs/css-to-react-native 支持 TypeScript 吗？

支持。包内自带 TypeScript 类型声明（package\.json 声明了 types 入口），安装后即可获得类型提示，无需再安装 @types 包。

### @cssxjs/css-to-react-native 支持 ESM 还是 CommonJS？

以 CommonJS 形式发布，可以直接 require\(\)；在 ES Module 项目中也可以用 import 引入（Node\.js 会把 module\.exports 作为默认导出）。

### @cssxjs/css-to-react-native 可以商用吗？

@cssxjs/css-to-react-native 使用 MIT 许可。宽松许可：允许商业使用、修改和再分发，通常只需在分发时保留原版权与许可声明。以上为概括，不构成法律意见，请以许可原文为准。

### @cssxjs/css-to-react-native 的下载量有多少？

根据 npm 官方下载统计，@cssxjs/css-to-react-native 在 2026/10/11 – 2026/11/09 这 30 天内被下载 5,774 次，日均约 192 次。下载量会把 CI 构建、镜像同步和作为其他包依赖的安装一并计入，适合横向比较热度，不能直接等同于使用人数。

### @cssxjs/css-to-react-native 还在维护吗？

最新版本 3\.2\.0-2 发布于 2026/01/25（9 个月前）；至今共发布 3 个版本，其中过去 12 个月发布了 2 个；首次发布于 2025/11/05。发布频率只是参考信号：功能稳定的工具可能很少需要更新，建议结合源码仓库的 issue 和提交记录判断。