@unif/react-native-design 0.21.0 → 0.21.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +69 -16
- package/package.json +4 -2
package/README.md
CHANGED
|
@@ -36,7 +36,7 @@ iOS 另需在 `ios/` 执行 `bundle exec pod install`。完整步骤见[文档
|
|
|
36
36
|
|
|
37
37
|
`react-native-worklets` 的 Babel 插件与 Metro transformer 由宿主工程提供,不随本库分发 —— 宿主需自备与 RN `0.86.2` 匹配的 `@babel/core`、`@react-native/babel-preset@0.86.x`、`@react-native/metro-config@0.86.x`。
|
|
38
38
|
|
|
39
|
-
`react-native-reanimated-carousel@5.0.0` 发布的 RNGH peer 是 `>=2.9.0 <3.0.0`,与本包要求的 `>=3.0.0 <4.0.0` 无交集;该组合已实测适配。消费端只能**接受这条警告**或加**只作用于 Carousel 的窄 override**(npm `overrides`、pnpm `peerDependencyRules.allowedVersions`、Yarn scoped `logFilters`),不要用全局 peer 忽略、`--force` 或 `--legacy-peer-deps
|
|
39
|
+
`react-native-reanimated-carousel@5.0.0` 发布的 RNGH peer 是 `>=2.9.0 <3.0.0`,与本包要求的 `>=3.0.0 <4.0.0` 无交集;该组合已实测适配。消费端只能**接受这条警告**或加**只作用于 Carousel 的窄 override**(npm `overrides`、pnpm `peerDependencyRules.allowedVersions`、Yarn scoped `logFilters`),不要用全局 peer 忽略、`--force` 或 `--legacy-peer-deps`。本仓不使用全局 `logFilters`；`yarn check:runtime-peers` 只接受 root、example、website 三条精确的 RNRC 5 / RNGH 3 例外。
|
|
40
40
|
|
|
41
41
|
## 快速开始
|
|
42
42
|
|
|
@@ -44,7 +44,12 @@ App 根必须按 `GestureHandlerRootView → SafeAreaProvider → ThemeProvider
|
|
|
44
44
|
|
|
45
45
|
```tsx
|
|
46
46
|
import {
|
|
47
|
-
ThemeProvider,
|
|
47
|
+
ThemeProvider,
|
|
48
|
+
ToastHost,
|
|
49
|
+
ConfirmHost,
|
|
50
|
+
Button,
|
|
51
|
+
useThemedStyles,
|
|
52
|
+
type ColorTokens,
|
|
48
53
|
} from '@unif/react-native-design';
|
|
49
54
|
import { View } from 'react-native';
|
|
50
55
|
import { GestureHandlerRootView } from 'react-native-gesture-handler';
|
|
@@ -77,6 +82,52 @@ export const App = () => (
|
|
|
77
82
|
);
|
|
78
83
|
```
|
|
79
84
|
|
|
85
|
+
## RN 0.86.2 组件展厅
|
|
86
|
+
|
|
87
|
+
仓库内的持久 `example/` 是 `@unif/react-native-design-example` workspace：它精确使用
|
|
88
|
+
React Native `0.86.2`、React `19.2.3`、New Architecture 和 Hermes，并通过 Metro
|
|
89
|
+
直接消费本仓 public package root。展厅只挂载当前路由，共有以下 8 个 scene：
|
|
90
|
+
|
|
91
|
+
| Scene ID | 标题 | 主要覆盖 |
|
|
92
|
+
| ------------- | -------------- | --------------------------------------------- |
|
|
93
|
+
| `foundation` | 基础能力与图标 | Theme、token、Icon、logger、testID |
|
|
94
|
+
| `actions` | 操作与状态 | Button、IconButton、Chip、Tag、StatusDot |
|
|
95
|
+
| `feedback` | 反馈与浮层 | Empty、动效、Blur、Toast、Confirm |
|
|
96
|
+
| `forms` | 表单与输入 | 文本输入、选择控件、Stepper、Form |
|
|
97
|
+
| `navigation` | 导航组件 | NavBar、DrawerHeader、Tabs、Segmented、TabBar |
|
|
98
|
+
| `collections` | 容器与集合 | Card、Cell、List、Grid、EntryCard、Carousel |
|
|
99
|
+
| `media` | 媒体展示 | Avatar、Thumbnail、Logo 与图片失败边界 |
|
|
100
|
+
| `business` | 业务复合组件 | 渐变、背景、统计、头像环、版本状态 |
|
|
101
|
+
|
|
102
|
+
从仓库根目录执行：
|
|
103
|
+
|
|
104
|
+
```sh
|
|
105
|
+
yarn install --immutable
|
|
106
|
+
yarn example start
|
|
107
|
+
yarn example android
|
|
108
|
+
yarn example ios
|
|
109
|
+
|
|
110
|
+
yarn verify:example-showcase
|
|
111
|
+
yarn example typecheck
|
|
112
|
+
yarn example lint
|
|
113
|
+
yarn example test --maxWorkers=2
|
|
114
|
+
```
|
|
115
|
+
|
|
116
|
+
iOS 首次运行或 native 依赖变化后，先执行
|
|
117
|
+
`cd example && bundle install`，再执行
|
|
118
|
+
`cd example && bundle exec pod install --project-directory=ios`。完整启动步骤、主题与
|
|
119
|
+
fontScale 操作，以及 VoiceOver/TalkBack、真机、旋转、remote image failure 等尚需人工
|
|
120
|
+
执行的矩阵见 [`example/README.md`](example/README.md)。自动化结果不等同于真机或 a11y
|
|
121
|
+
验收通过。
|
|
122
|
+
|
|
123
|
+
Media 默认 success fixture 是项目部署的
|
|
124
|
+
`https://unif-design.github.io/react-native-design/img/logo.png`，failure specimen 使用固定的
|
|
125
|
+
invalid-image fixture
|
|
126
|
+
`https://unif-design.github.io/react-native-design/example-fixtures/media-decode-failure-v1.png`，
|
|
127
|
+
确保 HTTP 成功后仍稳定进入 native decode failure/fallback 分支。
|
|
128
|
+
Jest 只证明 source wiring 以及合成 load/error event 后的组件状态；真实 HTTPS、缓存和 native
|
|
129
|
+
decode 仍按 `example/README.md` 的 Android/iOS 手工矩阵标记为待执行。
|
|
130
|
+
|
|
80
131
|
## 文档
|
|
81
132
|
|
|
82
133
|
- **文档站**(快速开始 · 组件 API · 设计令牌 · 设计原则):https://unif-design.github.io/react-native-design/
|
|
@@ -85,7 +136,7 @@ export const App = () => (
|
|
|
85
136
|
- **Agent Skill** `design`(`unif` plugin,覆盖组件 API、token 规则、与原生 RN 的关键差异):
|
|
86
137
|
`/plugin marketplace add unif-design/skills` → `/plugin install unif@skills`
|
|
87
138
|
|
|
88
|
-
##
|
|
139
|
+
## 临时原生验证宿主(runtime harness)
|
|
89
140
|
|
|
90
141
|
```sh
|
|
91
142
|
yarn create:runtime-harness
|
|
@@ -104,7 +155,9 @@ yarn create:runtime-harness
|
|
|
104
155
|
边界:
|
|
105
156
|
|
|
106
157
|
- app 只建在**脚本自持的系统临时目录**里(`fs.mkdtempSync`),**不接受调用方传目录**;脚手架之后的任一步失败也会递归删除自己那一个临时路径,只有完整成功才保留。
|
|
107
|
-
-
|
|
158
|
+
- **完全不读、不写、不复制持久 `example/`** —— 两者职责不同：`example/` 提供公共面
|
|
159
|
+
coverage 与可运行 RN `0.86.2` native shell；临时 runtime harness 专门验证 packed
|
|
160
|
+
tarball、负向路径与竞态，不替代展厅。
|
|
108
161
|
- 生成物不入库。
|
|
109
162
|
|
|
110
163
|
随后在**打印出来的那个目录**里执行(不是在本仓):
|
|
@@ -114,23 +167,23 @@ yarn android
|
|
|
114
167
|
yarn ios
|
|
115
168
|
```
|
|
116
169
|
|
|
117
|
-
harness
|
|
170
|
+
harness 不继承本仓 `check:runtime-peers` 的 workspace 精确 allowlist；安装输出会如实暴露这条已知的 RNRC / RNGH peer warning，等同消费端实际可见结果。
|
|
118
171
|
|
|
119
172
|
## 兼容性
|
|
120
173
|
|
|
121
174
|
支持范围严格来自 `package.json#peerDependencies`;本仓直接验证的版本是 RN `0.86.2` + React `19.2.3`。
|
|
122
175
|
|
|
123
|
-
| 依赖
|
|
124
|
-
|
|
|
125
|
-
| `react-native`
|
|
126
|
-
| `react`
|
|
127
|
-
| `react-native-gesture-handler`
|
|
128
|
-
| `react-native-reanimated`
|
|
129
|
-
| `react-native-worklets`
|
|
130
|
-
| `react-native-reanimated-carousel` | `>=5.0.0 <6.0.0`
|
|
131
|
-
| `react-native-safe-area-context`
|
|
132
|
-
| `react-native-svg`
|
|
133
|
-
| `@sbaiahmed1/react-native-blur`
|
|
176
|
+
| 依赖 | 支持范围 | 本仓验证版本 |
|
|
177
|
+
| ---------------------------------- | ------------------ | ------------ |
|
|
178
|
+
| `react-native` | `>=0.86.0 <0.87.0` | `0.86.2` |
|
|
179
|
+
| `react` | `>=19.2.3 <20.0.0` | `19.2.3` |
|
|
180
|
+
| `react-native-gesture-handler` | `>=3.0.0 <4.0.0` | `3.1.0` |
|
|
181
|
+
| `react-native-reanimated` | `>=4.5.2 <4.6.0` | `4.5.3` |
|
|
182
|
+
| `react-native-worklets` | `>=0.11.0 <0.12.0` | `0.11.3` |
|
|
183
|
+
| `react-native-reanimated-carousel` | `>=5.0.0 <6.0.0` | `5.0.0` |
|
|
184
|
+
| `react-native-safe-area-context` | `>=5` | `5.8.0` |
|
|
185
|
+
| `react-native-svg` | `>=15` | `15.15.5` |
|
|
186
|
+
| `@sbaiahmed1/react-native-blur` | `>=4` | `4.6.2` |
|
|
134
187
|
|
|
135
188
|
- 新架构(Fabric + TurboModule)必须开启;旧架构 Bridge、RN `0.85` 及更低版本、RN `0.87+` 都不在支持范围。
|
|
136
189
|
- Node.js `^20.19.4 || ^22.13.0 || ^24.3.0 || >= 25.0.0`(`package.json#engines`;本仓 `.nvmrc` 固定 `v24.13.0`)
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@unif/react-native-design",
|
|
3
|
-
"version": "0.21.
|
|
3
|
+
"version": "0.21.1",
|
|
4
4
|
"description": "Unif 设计系统:theme + icons + utils + components",
|
|
5
5
|
"main": "./lib/module/index.js",
|
|
6
6
|
"types": "./lib/typescript/src/index.d.ts",
|
|
@@ -47,6 +47,7 @@
|
|
|
47
47
|
"check:config": "node scripts/check-config.js",
|
|
48
48
|
"check:icons": "node scripts/check-icons-generated.js",
|
|
49
49
|
"check:runtime-peers": "node scripts/check-runtime-peers.js",
|
|
50
|
+
"verify:example-showcase": "node --test scripts/__tests__/verify-example-showcase.test.mjs && node scripts/verify-example-showcase.mjs",
|
|
50
51
|
"create:runtime-harness": "node scripts/create-runtime-api-harness.js",
|
|
51
52
|
"runtime:image-fixture": "node scripts/runtime-image-fixture.js",
|
|
52
53
|
"release": "release-it --only-version"
|
|
@@ -163,7 +164,8 @@
|
|
|
163
164
|
"testPathIgnorePatterns": [
|
|
164
165
|
"/node_modules/",
|
|
165
166
|
"<rootDir>/website/",
|
|
166
|
-
"<rootDir>/example/"
|
|
167
|
+
"<rootDir>/example/",
|
|
168
|
+
"<rootDir>/scripts/__tests__/"
|
|
167
169
|
]
|
|
168
170
|
},
|
|
169
171
|
"commitlint": {
|