Skip to content

Commit ed0185b

Browse files
ChenlingasMxChenlingasMx
committed
Merge branch 'dev' of https://github.com/uiwjs/react-native-uiw into dev
2 parents 5a06141 + 0f36090 commit ed0185b

File tree

5 files changed

+251
-0
lines changed

5 files changed

+251
-0
lines changed

‎packages/core/README.md‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -45,6 +45,20 @@ npx react-native init AwesomeProject --template @uiw/react-native-template
4545
yarn add @uiw/react-native react-native-svg@12.1.1 react-native-root-siblings@4.1.1 react-native-gesture-handler@2.8.0
4646
```
4747

48+
## Theme Configuration
49+
项目App.tsx文件配置
50+
51+
```jsx
52+
//...其他import
53+
import { ThemeProvider } from '@td-design/react-native';
54+
55+
const App = () => {
56+
return <ThemeProvider>{/** 其他Provider */}</ThemeProvider>;
57+
};
58+
59+
export default App;
60+
```
61+
4862
## Basic Usage
4963

5064
```jsx

‎packages/core/src/theme/README.md‎

Lines changed: 227 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,227 @@
1+
2+
# Theme 主题
3+
4+
`@shopify/restyle`库给我们提供了完备的主题定制功能。
5+
6+
## Spacing 间距
7+
8+
| 名称 | 说明 | 值 |
9+
| ----- | ----- | ---- |
10+
| `x0` | 1 倍 | `0` |
11+
| `x1` | 1 倍 | `4` |
12+
| `x2` | 2 倍 | `8` |
13+
| `x3` | 3 倍 | `12` |
14+
| `x4` | 4 倍 | `16` |
15+
| `x5` | 5 倍 | `20` |
16+
| `x6` | 6 倍 | `24` |
17+
| `x7` | 7 倍 | `28` |
18+
| `x8` | 8 倍 | `32` |
19+
| `x9` | 9 倍 | `36` |
20+
| `x10` | 10 倍 | `40` |
21+
22+
## 圆角
23+
24+
| 名称 | 说明 | 值 |
25+
| ----- | ----- | ---- |
26+
| `x0` | 1 倍 | `0` |
27+
| `x1` | 1 倍 | `4` |
28+
| `x2` | 2 倍 | `8` |
29+
| `x3` | 3 倍 | `12` |
30+
| `x4` | 4 倍 | `16` |
31+
| `x5` | 5 倍 | `20` |
32+
| `x6` | 6 倍 | `24` |
33+
| `x7` | 7 倍 | `28` |
34+
| `x8` | 8 倍 | `32` |
35+
| `x9` | 9 倍 | `36` |
36+
| `x10` | 10 倍 | `40` |
37+
38+
## 媒体查询断点
39+
40+
| 名称 | 说明 | 值 |
41+
| ------------- | ------ | ------ |
42+
| `phone` | 手机 | `0` |
43+
| `tablet` | 平板 | `768` |
44+
| `largeTablet` | 大平板 | `1024` |
45+
46+
## 通用颜色
47+
48+
| 名称 | 说明 | 值 |
49+
| ------------- | ---------- | ------------- |
50+
| `transparent` | 透明 | `transparent` |
51+
| `white` | 白色 | `#FFFFFF` |
52+
| `black` | 黑色 | `#000000` |
53+
| `func50` | 功能色 0 | `#FBF5F5` |
54+
| `func100` | 功能色 1 | `#FFF7E3` |
55+
| `func200` | 功能色 2 | `#FFD21D` |
56+
| `func300` | 功能色 3 | `#52C41A` |
57+
| `func400` | 功能色 4 | `#1890FF` |
58+
| `func500` | 功能色 5 | `#F86E21` |
59+
| `func600` | 功能色 6 | `#F4333C` |
60+
| `func700` | 保留功能色 | `transparent` |
61+
| `func800` | 保留功能色 | `transparent` |
62+
| `func900` | 保留功能色 | `transparent` |
63+
64+
**我们设置了`func700`/ `func800`/ `func900`作为保留功能色，方便开发者进行扩展**
65+
66+
## 亮色模式颜色(继承通用颜色)
67+
68+
| 名称 | 说明 | 值 |
69+
| ------------- | ---------- | ----------------------- |
70+
| `primary50` | 主色 | `#E5F1FF` |
71+
| `primary100` | 主色 | `#3AA3FF` |
72+
| `primary200` | 主色 | `#005DFF` |
73+
| `primary300` | 主色 | `rgba(0, 93, 255, 0.7)` |
74+
| `primary400` | 主色 | `rgba(0, 93, 255, 0.4)` |
75+
| `primary500` | 保留主色 | `transparent` |
76+
| `primary600` | 保留主色 | `transparent` |
77+
| `primary700` | 保留主色 | `transparent` |
78+
| `primary800` | 保留主色 | `transparent` |
79+
| `primary900` | 保留主色 | `transparent` |
80+
| `gray50` | 中性色 | `#F5F5F5` |
81+
| `gray100` | 中性色 | `#E5E5E5` |
82+
| `gray200` | 中性色 | `#CCCCCC` |
83+
| `gray300` | 中性色 | `#999999` |
84+
| `gray400` | 中性色 | `#666666` |
85+
| `gray500` | 中性色 | `#333333` |
86+
| `gray600` | 中性色 | `rgba(0, 0, 0, 0.4)` |
87+
| `gray700` | 中性色 | `rgba(0, 0, 0, 0.04)` |
88+
| `gray800` | 保留中性色 | `transparent` |
89+
| `gray900` | 保留中性色 | `transparent` |
90+
| `background` | 背景色 | 同`gray50` |
91+
| `mask` | 遮罩 | 同`gray600` |
92+
| `border` | 边框 | 同`gray200` |
93+
| `icon` | 图标 | 同`gray300` |
94+
| `disabled` | 禁用 | 同`gray200` |
95+
| `text` | 文本 | 同`gray500` |
96+
| `text_active` | 当前文本 | 同`white` |
97+
98+
**我们设置了`primary500`/ `primary600`/ `primary700`/ `primary800`/ `primary900`作为保留主色， `gray800` / `gray900`作为保留中性色，方便开发者进行扩展**
99+
100+
## 暗色模式颜色(继承通用颜色)
101+
102+
| 名称 | 说明 | 值 |
103+
| ------------- | ----------| --------------------------- |
104+
| `primary50` | 主色 | `rgba(0, 93, 255, 0.3)` |
105+
| `primary100` | 主色 | `#3AA3FF` |
106+
| `primary200` | 主色 | `#005DFF` |
107+
| `primary300` | 主色 | `rgba(0, 93, 255, 0.7)` |
108+
| `primary400` | 主色 | `rgba(0, 93, 255, 0.4)` |
109+
| `primary500` | 保留主色 | `transparent` |
110+
| `primary600` | 保留主色 | `transparent` |
111+
| `primary700` | 保留主色 | `transparent` |
112+
| `primary800` | 保留主色 | `transparent` |
113+
| `primary900` | 保留主色 | `transparent` |
114+
| `gray50` | 中性色 | `#0D0D0D` |
115+
| `gray100` | 中性色 | `rgba(255, 255, 255, 0.15)` |
116+
| `gray200` | 中性色 | `rgba(255, 255, 255, 0.25)` |
117+
| `gray300` | 中性色 | `rgba(255, 255, 255, 0.4)` |
118+
| `gray400` | 中性色 | `rgba(255, 255, 255, 0.6)` |
119+
| `gray500` | 中性色 | `rgba(255, 255, 255, 0.8)` |
120+
| `gray600` | 中性色 | `rgba(0, 0, 0, 0.4)` |
121+
| `gray700` | 中性色 | `rgba(0, 0, 0, 0.04)` |
122+
| `gray800` | 中性色 | `#1E1E28` |
123+
| `gray900` | 保留中性色 | `transparent` |
124+
| `background` | 背景色 | 同`gray50` |
125+
| `mask` | 遮罩 | 同`gray800` |
126+
| `border` | 边框 | 同`gray400` |
127+
| `icon` | 图标 | 同`gray300` |
128+
| `disabled` | 禁用 | 同`gray200` |
129+
| `text` | 文本 | 同`gray500` |
130+
| `text_active` | 当前文本 | 同`white` |
131+
132+
## TextVariant
133+
134+
| 名称 | 字体大小(fontSize) | 字重(fontWeight) | 行高(lineHeight) | 字体(fontFamily) |
135+
| ---- | ------------------ | ---------------- | ---------------- | ---------------- |
136+
| `h0` | 28 | `bold` | 39 | PingFang SC |
137+
| `h1` | 18 | `500` | 25 | PingFang SC |
138+
| `h2` | 16 | `500` | 22 | PingFang SC |
139+
| `h3` | 14 | `500` | 19 | PingFang SC |
140+
| `h4` | | | | |
141+
| `h5` | | | | |
142+
| `h6` | | | | |
143+
| `h7` | | | | |
144+
| `h8` | | | | |
145+
| `h9` | | | | |
146+
| `p0` | 16 | | 22 | PingFang SC |
147+
| `p1` | 14 | | 19 | PingFang SC |
148+
| `p2` | 12 | | 16 | PingFang SC |
149+
| `p3` | 10 | | 14 | PingFang SC |
150+
| `p4` | | | | |
151+
| `p5` | | | | |
152+
| `p6` | | | | |
153+
| `p7` | | | | |
154+
| `p8` | | | | |
155+
| `p9` | | | | |
156+
| `d0` | 24 | | 28 | Roboto |
157+
| `d1` | 18 | | 21 | Roboto |
158+
| `d2` | 14 | | 19 | Roboto |
159+
| `d3` | 12 | | 14 | Roboto |
160+
| `d4` | | | | |
161+
| `d5` | | | | |
162+
| `d6` | | | | |
163+
| `d7` | | | | |
164+
| `d8` | | | | |
165+
| `d9` | | | | |
166+
167+
**我们设置了`h4`/`h5`/`h6`/`h7`/`h8`/`h9`/`p4`/`p5`/`p6`/`p7`/`p8`/`p9`/`d4`/`d5`/`d6`/`d7`/`d8`/`d9`作为保留的字体样式，方便开发者进行扩展**
168+
169+
## 如何复写应用主题
170+
171+
想要复写应用主题很简单，只需要如下操作就可以实现：
172+
173+
### 1. 在应用中定义你自己的主题颜色文件：
174+
175+
```ts | pure
176+
import { theme, Theme } from '@td-design/react-native';
177+
178+
export const lightTheme: Theme = {
179+
...theme.lightTheme,
180+
colors: {
181+
...theme.lightTheme.colors,
182+
// 复写需要覆盖的颜色
183+
},
184+
};
185+
186+
export const darkTheme: Theme = {
187+
...theme.darkTheme,
188+
colors: {
189+
...theme.darkTheme.colors,
190+
// 复写需要覆盖的颜色
191+
},
192+
};
193+
```
194+
195+
### 2. 把自定义主题注入到`app.tsx`里的`ThemeProvider`里:
196+
197+
```jsx | pure
198+
// 其他import
199+
import { ThemeProvider } from '@td-design/react-native';
200+
import { lightTheme, darkTheme } from './theme';
201+
202+
export default () => {
203+
// 其他代码
204+
205+
return <ThemeProvider theme={lightTheme}>{/** 其他Provider */}</ThemeProvider>;
206+
};
207+
```
208+
209+
### 3. 实现亮色模式和暗色模式切换
210+
211+
```jsx | pure
212+
// 其他import
213+
import { ThemeProvider } from '@td-design/react-native';
214+
import { lightTheme, darkTheme } from './theme';
215+
216+
export default () => {
217+
const [dark, setDark] = useState(false);
218+
// 其他代码
219+
220+
return (
221+
<ThemeProvider theme={dark ? darkTheme : lightTheme}>
222+
{/** 把setDark方法通过context或者其他全局变量的方式传递到应用里在需要的地方调用即可。 */}
223+
{/** 其他Provider */}
224+
</ThemeProvider>
225+
);
226+
};
227+
```

‎website/src/pages/components/theme/index.tsx‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
import Preview from 'src/component/Preview';
2+
import md from '@uiw/react-native/lib/theme/README.md';
3+
4+
const DEMO = () => <Preview {...md} path="/packages/core/src/theme/README.md" />;
5+
export default DEMO;

‎website/src/routes/menus.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@ import { MenuData } from '../component/SubMenus';
22

33
export const componentMenus: MenuData[] = [
44
{ path: '/components/about', name: '关于 UIW' },
5+
{ path: '/components/theme', name: 'Theme' },
56
{ divider: true, name: '通用' },
67
{ path: '/components/button', name: 'Button 按钮' },
78
{ path: '/components/buttongroup', name: 'ButtonGroup 按钮组' },

‎website/src/routes/router.tsx‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -101,6 +101,10 @@ export const routeData = [
101101
path: '/components/about',
102102
component: lazy(() => import('../pages/components/about')),
103103
},
104+
{
105+
path: '/components/theme',
106+
component: lazy(() => import('../pages/components/theme')),
107+
},
104108
{
105109
path: '/components/divider',
106110
component: lazy(() => import('../pages/components/divider')),

0 commit comments

Comments
 (0)