Skip to content

Commit 632a30a

Browse files
panbibipanbibi
committed
doc:添加从v3到v4 更新日志界面文档
1 parent 4dccfd5 commit 632a30a

File tree

6 files changed

+201
-5
lines changed

6 files changed

+201
-5
lines changed

‎packages/core/README.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -50,7 +50,7 @@ yarn add @uiw/react-native react-native-svg@12.1.1 react-native-root-siblings@4.
5050

5151
```jsx
5252
//...其他import
53-
import { ThemeProvider } from '@td-design/react-native';
53+
import { ThemeProvider } from '@uiw/react-native';
5454

5555
const App = () => {
5656
return <ThemeProvider>{/** 其他Provider */}</ThemeProvider>;

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

Lines changed: 186 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,186 @@
1+
# 更新日志
2+
3+
<b><font face="微软雅黑" size=3 color=#3578e5 >V4.0.0</font></b>
4+
5+
`2023-04-14`
6+
7+
**Bug Fixes**
8+
9+
- Switch: 修复switch初始值(默认值)不能正确显示状态 [#583](https://github.com/uiwjs/react-native-uiw/pull/583)
10+
- ActionSheet: 优化弹窗按钮的点击区域 [#562](https://github.com/uiwjs/react-native-uiw/pull/562)
11+
- Input: 优化文本输入框组件文档 [#541](https://github.com/uiwjs/react-native-uiw/pull/541)
12+
- SpeedDial: 修复文档遮挡，无法点击问题 [#545](https://github.com/uiwjs/react-native-uiw/pull/545)
13+
- Tabs: 修复选项卡组件报错和展示溢出问题 [#550](https://github.com/uiwjs/react-native-uiw/pull/550)
14+
- SpeedDial: 修复层级较低组件无法选中问题 [#553](https://github.com/uiwjs/react-native-uiw/pull/553)
15+
- Form: 优化Form示例展示 [#2641](https://github.com/uiwjs/react-native-uiw/actions/runs/4644484377)
16+
- ImagePicker: 修复android保存图片报错 [#2696](https://github.com/uiwjs/react-native-uiw/actions/runs/4695870443)
17+
- Progress: 重构组件 变更参数
18+
19+
**Feature**
20+
21+
- Theme: 新增主题色 和 theme文档使用说明，支持明暗主题适配 ([#586](https://github.com/uiwjs/react-native-uiw/pull/586))
22+
- VerificationCode: 新增 VerificationCode 验证码倒计时组件 和 文档示例 [#589](https://github.com/uiwjs/react-native-uiw/pull/589)
23+
- Tree: 新增 Tree 树形控件 和 文档示例 [#590](https://github.com/uiwjs/react-native-uiw/pull/590)
24+
- Accordion: 新增 Accordion 手风琴组件 [#588](https://github.com/uiwjs/react-native-uiw/pull/588)
25+
- Accordion: 新增 isMultiple、accordionStyle、iconShow、contentStyle、iconSize 文档示例 [#588](https://github.com/uiwjs/react-native-uiw/pull/588)
26+
- ImagePicker: 新增 ImagePicker 图片上传组件 [#2674](https://github.com/uiwjs/react-native-uiw/actions/runs/4664460047)
27+
- List: 新增 titleLabelStyle 属性支持 [#548](https://github.com/uiwjs/react-native-uiw/pull/548)
28+
- ImagePicker: 新增 ImagePicker 图片保存功能 [#2691](https://github.com/uiwjs/react-native-uiw/actions/runs/4687708113)
29+
- DatePeriodInput: 新增 DatePeriodInput 日期区间选择器 [#553](https://github.com/uiwjs/react-native-uiw/pull/553)
30+
31+
### 1.在app.tsx入口文件添加如下
32+
33+
```diff
34+
import { ThemeProvider,theme } from '@uiw/react-native';
35+
36+
+ <ThemeProvider theme={theme.lightTheme}>
37+
{/** 其他Provider */}
38+
+ </ThemeProvider>;
39+
```
40+
41+
### 2.VerificationCode 基本用法
42+
43+
```diff
44+
import React from 'react';
45+
import { View } from 'react-native';
46+
import { VerificationCode } from '@uiw/react-native'
47+
48+
const Demo = () => {
49+
+ const [value, setValue] = useState('');
50+
return (
51+
<View>
52+
+ <VerificationCode
53+
+ value={value}
54+
+ count={3}
55+
+ onChange={(val) => console.log(val)}
56+
+ outerStyle={{ borderWidth: 1, borderColor: "#ccc" }}
57+
+ />
58+
</View>
59+
)
60+
}
61+
}
62+
```
63+
64+
### 3.Tree 基本用法
65+
66+
```diff
67+
import React from 'react';
68+
import { View } from 'react-native';
69+
import { Tree } from '@uiw/react-native'
70+
71+
const Demo = () => {
72+
+ const option = [
73+
+ {
74+
+ label: '一栋',
75+
+ value: '01',
76+
+ children: [
77+
+ {
78+
+ label: '01-1',
79+
+ value: '01-1',
80+
+ children: [{label: 01-1-1', value: '01-1-1'}],
81+
+ },
82+
+ ],
83+
+ },
84+
+ ]
85+
return (
86+
<View>
87+
+ <Tree treeData={option} defaultExpandAll />
88+
</View>
89+
)
90+
}
91+
}
92+
```
93+
94+
### 4.Accordion 基本用法 及 新增属性
95+
96+
```diff
97+
import React from 'react';
98+
import { View } from 'react-native';
99+
import { Accordion } from '@uiw/react-native'
100+
101+
const Demo = () => {
102+
+ const contents = [
103+
+ {
104+
+ title: <Text>Section 1</Text>,
105+
+ content: (
106+
+ <View>
107+
+ <Text>Content of section 1</Text>
108+
+ <Image source={{uri: 'https://wx3.sinaimg.cn/mw690/4718260ely1gt2cg7t5udj23dw1wkhdu.jpg'}} style={{height: 180}} />
109+
+ </View>
110+
+ ),
111+
+ },
112+
+ {
113+
+ title: <Text>Section 2</Text>,
114+
+ content: (
115+
+ <View>
116+
+ <Text>Content of section 2</Text>
117+
+ <Image source={{uri: 'https://wx1.sinaimg.cn/mw690/4718260ely1gt2cg5r9zij22yo1o0x6p.jpg'}} style={{height: 180}} />
118+
+ </View>
119+
+ ),
120+
+ },
121+
return (
122+
<View>
123+
+ <Accordion sections={contents} />
124+
{/** isMultiple 是否可以展开多个.默认为是,当前为否 */}
125+
+ <Accordion sections={contents} isMultiple={false} />
126+
{/** iconShow 是否展示右侧图标,默认为是,当前为否 */}
127+
+ <Accordion sections={contents} iconShow={false} />
128+
{/** iconSize 设置右侧图标尺寸大小 */}
129+
+ <Accordion sections={contents} iconSize={30} />
130+
{/** accordionStyle 每行列表手风琴样式*/}
131+
+ <Accordion sections={contents} accordionStyle={{backgroundColor: '#3578e5'}} />
132+
{/** contentStyle 展开手风琴内容样式 */}
133+
+ <Accordion sections={contents} contentStyle={{backgroundColor: '#FFD21D'}} />
134+
</View>
135+
)
136+
}
137+
}
138+
```
139+
140+
### 5.ImagePicker 基本用法
141+
142+
```diff
143+
import React from 'react';
144+
import { ImagePicker } from '@uiw/react-native'
145+
import { View } from 'react-native';
146+
147+
const Demo = () => {
148+
return (
149+
<View>
150+
+ <ImagePicker
151+
+ upload={(file: File[]) => {
152+
+ let imageList: string[] = [];
153+
+ file.forEach(file => imageList.push(file.uri));
154+
+ return imageList;
155+
+ }}
156+
+ selectionLimit={2}
157+
+ />
158+
</View>
159+
)
160+
}
161+
}
162+
```
163+
164+
### 6.DatePeriodInput 基本用法
165+
166+
```diff
167+
import React,{useState} from 'react';
168+
import { DatePeriodInput } from '@uiw/react-native'
169+
import { View } from 'react-native';
170+
171+
172+
const Demo = () => {
173+
const [value, setValue] = useState('');
174+
return (
175+
<View>
176+
+ <DatePeriodInput
177+
+ value={value}
178+
+ onChange={date => {
179+
+ setState(date);
180+
+ }}
181+
+ />
182+
</View>
183+
)
184+
}
185+
}
186+
```

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

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -173,7 +173,7 @@
173173
### 1. 在应用中定义你自己的主题颜色文件：
174174

175175
```ts | pure
176-
import { theme, Theme } from '@td-design/react-native';
176+
import { theme, Theme } from '@uiw/react-native';
177177

178178
export const lightTheme: Theme = {
179179
...theme.lightTheme,
@@ -196,7 +196,7 @@ export const darkTheme: Theme = {
196196

197197
```jsx | pure
198198
// 其他import
199-
import { ThemeProvider } from '@td-design/react-native';
199+
import { ThemeProvider } from '@uiw/react-native';
200200
import { lightTheme, darkTheme } from './theme';
201201

202202
export default () => {
@@ -210,7 +210,7 @@ export default () => {
210210

211211
```jsx | pure
212212
// 其他import
213-
import { ThemeProvider } from '@td-design/react-native';
213+
import { ThemeProvider } from '@uiw/react-native';
214214
import { lightTheme, darkTheme } from './theme';
215215

216216
export default () => {

‎website/src/pages/components/changelog/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/changelog/README.md';
3+
4+
const DEMO = () => <Preview {...md} path="/packages/core/src/changelog/README.md" />;
5+
export default DEMO;

‎website/src/routes/menus.ts‎

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

33
export const componentMenus: MenuData[] = [
44
{ path: '/components/about', name: '关于 UIW' },
5-
{ path: '/components/theme', name: 'Theme' },
5+
{ path: '/components/changelog', name: '从 V3 到 V4 ' },
6+
{ path: '/components/theme', name: 'Theme 主题' },
67

78
{ divider: true, name: '通用' },
89
{ path: '/components/button', name: 'Button 按钮' },

‎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/changelog',
106+
component: lazy(() => import('../pages/components/changelog')),
107+
},
104108
{
105109
path: '/components/theme',
106110
component: lazy(() => import('../pages/components/theme')),

0 commit comments

Comments
 (0)