# @brightlayer-ui/react-native-themes 中文文档

规范地址：https://npmcn.com/package/%40brightlayer-ui/react-native-themes/

版本：8\.1\.1
npm 元数据更新时间：2026-07-22T07:30:02.727Z
中文译文更新时间：2026-11-08T15:22:57.258Z
软件包许可：BSD-3-Clause

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

原始 npm 页面：https://www.npmjs.com/package/%40brightlayer-ui/react-native-themes
原文对照：https://npmcn.com/package/%40brightlayer-ui/react-native-themes/?lang=original
项目主页：https://github.com/etn-ccis/blui-react-native/tree/master
源码仓库：https://github.com/etn-ccis/blui-react-native

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

- 包体积（解压后）：64.2 kB，13 个文件
- 模块格式：ESM + CJS
- TypeScript 类型：包内自带
- 运行依赖：4 个
- peer 依赖：react-native-paper ^5\.15\.0
- 首次发布：2021-11-03T13:26:30.429Z
- 最新版本发布：2026-07-22T07:30:02.578Z
- 近 30 天下载量：13955（2026-10-09 至 2026-11-07，npm 官方下载统计）
- 已发布版本数：25（近 12 个月 3 个）

## 中文简介

为 Brightlayer UI 应用程序反应本地主题

## 安装

```sh
npm install @brightlayer-ui/react-native-themes
```

也可以使用：`pnpm add @brightlayer-ui/react-native-themes`、`yarn add @brightlayer-ui/react-native-themes`、`bun add @brightlayer-ui/react-native-themes`

## README

# React 本地应用程序的亮层 UI 主题

[![Build](https://github.com/etn-ccis/blui-react-native-themes/actions/workflows/blui-ci.yml/badge.svg?branch=master)](https://github.com/etn-ccis/blui-react-native-themes/actions/workflows/blui-ci.yml) [![](https://img.shields.io/npm/v/@brightlayer-ui/react-native-themes.svg?label=@brightlayer-ui/react-native-themes&style=flat)](https://www.npmjs.com/package/@brightlayer-ui/react-native-themes)

此软件包提供 [主题](https://brightlayer-ui.github.io/style/themes) 支持使用Brightlayer UI设计系统的Eaton应用程序. 它包括使用 React Industrial 开发者的资源 [反应-内生纸](https://www.npmjs.com/package/react-native-paper)。本包包含两个主题选项:蓝色主题(标准)和黑暗主题.

关于其他框架,请检查我们的有关包:

-   [@ brightlayer-ui/angular-主题](https://www.npmjs.com/package/@brightlayer-ui/angular-themes)
-   [@ blightlayer-ui/反应主题](https://www.npmjs.com/package/@brightlayer-ui/react-themes)

## 安装

用 npm 安装

```shell
npm install --save @brightlayer-ui/react-native-themes
```

线条

```shell
yarn add @brightlayer-ui/react-native-themes
```

或展览

```shell
yarn expo install @brightlayer-ui/react-native-themes
```

# 使用量

> **注:** 使用 Blightlayer 的 UI React 本地主题需要您在应用程序中添加 Open Sans 字体 。 你可以通过阅读指令来学习如何做到这一点 [香草反应原生](https://medium.com/react-native-training/react-native-custom-fonts-ccc9aacf9e5e) 或者说 [博览](https://docs.expo.dev/develop/user-interface/fonts/#add-a-custom-font)。如果您以 [@ blightlayer-ui/ cli (英语)](https://www.npmjs.com/package/@brightlayer-ui/cli)。 。 。 .

> 使用 Expo 时, 您需要指定您使用格式加载的每个字体重的名称 `OpenSans-<Weight>`例如: OpenSans-SemiBold. (中文(简体) ). 参考我们的一个反动土著演示.

在您的应用程序中使用我们的主题, 只需将应用程序包入 `Provider` 并传递您想要的主题(例如, `blue`, (中文(简体) ), `blueDark`) (中文(简体) ).

#### 光主题

```tsx
import { Provider as ThemeProvider} from 'react-native-paper';
import * as BLUIThemes from '@brightlayer-ui/react-native-themes';
...
// Default Theme
<ThemeProvider theme={BLUIThemes.blue}>
    <App />
</ThemeProvider>
```

#### 黑暗主题

```tsx
import { Provider as ThemeProvider} from 'react-native-paper';
import * as BLUIThemes from '@brightlayer-ui/react-native-themes';
...
<ThemeProvider theme={BLUIThemes.blueDark}>
    <App />
</ThemeProvider>
```

### 反弹原生纸张组件样式覆盖

此文档包含多个组件的一组样式覆盖 [反应原生纸](https://callstack.github.io/react-native-paper/index.html) 组件.

默认情况下,RNP提供的主题化机制非常微乎其微,不能让我们精确地按照我们想要的Brightlayer UI应用程序的方式来样式组件. 主题不包含所有绕过这个问题的大小写, 对于某些组件, 您可能需要添加额外的样式或主题覆盖内线, 使其与 Brightlayer UI 应用程序一致

要给文档中列出的组件样式以查看应用程序中的正确性,请使用 [亮层 UI 组件样式覆盖](https://github.com/etn-ccis/blui-react-native-themes/blob/master/RNPComponents/RNPComponents.md) 取代React Independent Paper的相应组件.

### 类型脚本

我们的Brightlayer UI主题扩展了React Independence提供的主题. 如果您在 TypeScript 工程中使用这些主题, 想要访问默认中添加的任何属性, 您需要使用Expended 工程中的主题钩子 :

```tsx
import { useExtendedTheme } from '@brightlayer-ui/react-native-themes';
...
const theme = useExtendedTheme();
<Button mode="contained" style={{ backgroundColor: theme.colors.onOrangeFilledContainer }}>
    Label
</Button>
```

## 在您的工程中使用 FontWight 钩

当应用程序中文本元素的字体Family需要修改时,您可以使用使用FontWight钩. 例如,将字体Weight设置为"粗体",您可以使用FontWeight()的钩子,如下所示:

```tsx
import { useFontWeight } from '@brightlayer-ui/react-native-themes';
...
const fontStyleBold = useFontWeight('700');
<Text variant={'headlineLarge'} style={{ ...fontStyleBold }}>
    headlineLarge
</Text>
```

### 从版本6升级到 > 7

在第七版中,图书馆已经更新,以便使用 [反应原生纸](https://callstack.github.io/react-native-paper/) v5,正在通过 [材料设计 3](https://m3.material.io/)。这些主题现已更新,以便使用材料设计3主题.

## 常见问题

### @brightlayer-ui/react-native-themes 是什么？

为 Brightlayer UI 应用程序反应本地主题

### 如何安装 @brightlayer-ui/react-native-themes？

在项目目录运行 npm install @brightlayer-ui/react-native-themes，或使用 pnpm add / yarn add / bun add。它还需要宿主项目提供 peer 依赖：react-native-paper（^5\.15\.0）。npm 7 及以上与 pnpm 8 及以上默认会自动安装必需的 peer 依赖，Yarn 需要手动安装。

### @brightlayer-ui/react-native-themes 支持 TypeScript 吗？

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

### @brightlayer-ui/react-native-themes 支持 ESM 还是 CommonJS？

同时提供 ES Module 与 CommonJS 入口，import 和 require\(\) 都可以使用，打包工具会自动选择合适的版本。

### @brightlayer-ui/react-native-themes 可以商用吗？

@brightlayer-ui/react-native-themes 使用 BSD-3-Clause 许可。宽松许可：允许商业使用、修改和再分发，通常只需在分发时保留原版权与许可声明。另外不得用原作者名义为衍生产品背书。以上为概括，不构成法律意见，请以许可原文为准。

### @brightlayer-ui/react-native-themes 的下载量有多少？

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

### @brightlayer-ui/react-native-themes 还在维护吗？

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