@unif/react-native-design 0.4.36 → 0.5.0

package/README.md

@@ -5,7 +5,10 @@
 [![License](https://img.shields.io/npm/l/@unif/react-native-design.svg?color=blue)](LICENSE)
 [![Docs](https://img.shields.io/badge/docs-unif--design.github.io-orange.svg)](https://unif-design.github.io/react-native-design/)
 
-Unif 设计系统 —— theme + icons + utils + components,面向 React Native 0.85 新架构(Fabric + concurrent React)。
+Unif 设计系统：theme(设计令牌)+ 组件 + 图标 + utils，面向 RN 0.85 新架构(Fabric + concurrent React)。所有 Unif 应用与端能力包的 UI 基座。
+
+> 📖 **完整文档**(快速开始 · 组件 · 设计令牌 · 设计原则)：
+> **https://unif-design.github.io/react-native-design/**
 
 ## 安装
 
@@ -13,93 +16,21 @@ Unif 设计系统 —— theme + icons + utils + components,面向 React Native
 yarn add @unif/react-native-design
 ```
 
-需要在宿主工程提前安装的 peer dependencies:
-
-```sh
-yarn add react-native-svg react-native-gesture-handler react-native-reanimated \
-  react-native-worklets react-native-safe-area-context \
-  react-native-reanimated-carousel @gorhom/bottom-sheet @sbaiahmed1/react-native-blur
-```
+需要一组 peer(`react-native-svg` / `react-native-gesture-handler` / `react-native-reanimated` / `react-native-worklets` / `react-native-safe-area-context` / `react-native-reanimated-carousel` / `@gorhom/bottom-sheet` / `@sbaiahmed1/react-native-blur`)+ 根挂 `ThemeProvider`，详见[文档站 · 快速开始](https://unif-design.github.io/react-native-design/docs/getting-started)。
 
 ## 用法
 
-在 app 根附近挂一次 `ThemeProvider`,并按需挂载命令式 host:
-
-```tsx
-import { ThemeProvider, ToastHost, ConfirmHost } from '@unif/react-native-design';
-
-export function App() {
-  return (
-    <ThemeProvider>
-      {/* ...你的导航 / 屏幕... */}
-      <ToastHost />
-      <ConfirmHost />
-    </ThemeProvider>
-  );
-}
-```
-
-组件内通过 `useThemedStyles` 拿当前主题的 `StyleSheet`:
-
 ```tsx
-import { Button, useThemedStyles, type ColorTokens } from '@unif/react-native-design';
-import { View } from 'react-native';
+import { Button, useColors, useThemedStyles } from '@unif/react-native-design';
 
-// makeStyles 必须定义在模块顶层,不要写在组件里 inline
-const makeStyles = (c: ColorTokens) => ({
-  wrap: { padding: 16, backgroundColor: c.surface },
-});
-
-export function Demo() {
-  const styles = useThemedStyles(makeStyles);
-  return (
-    <View style={styles.wrap}>
-      <Button label="保存" onPress={() => {}} />
-    </View>
-  );
+function MyScreen() {
+  const c = useColors();
+  return <Button label="提交" onPress={() => {}} />;
 }
 ```
 
-命令式 API:
-
-```tsx
-import { toast, confirm } from '@unif/react-native-design';
-
-toast.success('已保存');
-
-const ok = await confirm({
-  title: '确认注销账号?',
-  message: '注销后数据无法恢复',
-  destructive: true,
-});
-```
-
-## 包结构
-
-- **theme** —— `ThemeProvider` / `useTheme` / `useColors` / `useShadow` / `useThemedStyles`,以及 color / shadow / type / space / radius / icon / control / motion 等 token,`r` / `rf` 尺寸 & 字号缩放
-- **icons** —— `IconName` 联合类型 + `ICONS` 数据(用 `<Icon name="..." />` 渲染)
-- **components/ui** —— 原子组件:Button、Card、Cell、NavBar、BottomSheet、Toast、Confirm、Input、Search、Tabs、Switch 等约 37 个
-- **components/business** —— 通用业务复合组件:AvatarWithRing、Decorations、GlassStats、VersionPill(耦合 navigation / store 的组件留在消费者仓库)
-- **utils** —— `createLogger(scope)` 日志器、`childTestID` 列表型组件 testID 拼接助手
-
-## Example
-
-`example/` 是接通本库的 RN 宿主应用:
-
-```sh
-yarn
-yarn example start         # metro
-yarn example ios           # 或 yarn example android
-```
-
-源码改动会通过 Metro monorepo 配置直接热更新,不需要重新构建原生。
-
-## 贡献
-
-- [开发流程](CONTRIBUTING.md#development-workflow)
-- [提交 PR](CONTRIBUTING.md#sending-a-pull-request)
-- [行为准则](CODE_OF_CONDUCT.md)
+组件 API、token 调色板、暗色适配、设计原则 —— 见[文档站](https://unif-design.github.io/react-native-design/)。
 
-## License
+## 许可
 
 MIT