Skip to content

Commit bbad461

Browse files
cuilanxincuilanxin
authored
doc: Update document example & Remove redundant code. (#222)
* 编写选项卡组件 * 类型名称请调整，添加组件文档在网站上展示 * #162修复报错 * fix:#162修复报错 * SpeedDial 悬浮标记 * 优化类型 * feat(ActionSheet): Add new component. * fix: ActionSheet 实例优化，组件优化 * feat(SearchInputBar): Add new component. * feat(Pagination): Add new component. * fix(Tooltip): 修复cloud弹出元素位置问题 * doc(Drawer): Update README.md * doc: Update README.md
1 parent 52a6298 commit bbad461

File tree

20 files changed

+115
-67
lines changed

20 files changed

+115
-67
lines changed

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

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,6 @@ function Demo() {
1616
<View style={{ flexDirection: 'row' }}>
1717
<Avatar src="https://xx.images.com/xxx/icon.png" />
1818
<Avatar src={uri} />
19-
<Avatar src={require('./1.png')} />
2019
</View>
2120
);
2221
}

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

Lines changed: 69 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -54,6 +54,75 @@ function Demo() {
5454
}
5555
```
5656

57+
## 注意事项 - 抽屉高度是页面有效高度
58+
```jsx
59+
import { Fragment } from 'react';
60+
import { View, Text, SafeAreaView } from 'react-native';
61+
import { Drawer, Button } from '@uiw/react-native';
62+
63+
function Demo() {
64+
const [visible, setVisible] = useState(false);
65+
return (
66+
<SafeAreaView style={{flex: 1}}>
67+
<Drawer
68+
isOpen={visible}
69+
onChange={(isOpen) => setVisible(isOpen)}
70+
>
71+
<View>
72+
<Text>左边打开抽屉内容</Text>
73+
</View>
74+
</Drawer>
75+
<Button onPress={() => setVisible(!visible)}>左边打开抽屉</Button>
76+
</SafeAreaView>
77+
);
78+
}
79+
```
80+
## 抽屉覆盖全屏
81+
- 可查看 [react-native-root-siblings](https://www.npmjs.com/package/react-native-root-siblings) 文档
82+
```jsx
83+
// 在 App.js 文件中
84+
import React from 'react';
85+
import {Provider} from 'react-redux';
86+
import {store} from './models';
87+
import {RootSiblingParent} from 'react-native-root-siblings';
88+
89+
export default () => {
90+
return (
91+
<Provider store={store}>
92+
<RootSiblingParent>
93+
{/* ...你的导航之类的组件 */}
94+
</RootSiblingParent>
95+
</Provider>
96+
);
97+
};
98+
99+
100+
// 在使用组件页面
101+
import { Fragment } from 'react';
102+
import { View, Text, SafeAreaView } from 'react-native';
103+
import { Drawer, Button } from '@uiw/react-native';
104+
import {RootSiblingPortal} from 'react-native-root-siblings';
105+
106+
function Demo() {
107+
const [visible, setVisible] = useState(false);
108+
return (
109+
<SafeAreaView>
110+
<RootSiblingPortal>
111+
<Drawer
112+
isOpen={visible}
113+
onChange={(isOpen) => setVisible(isOpen)}
114+
>
115+
{/* SafeAreaView 这样做是有必要的，因为手机时间是需要与内容分开的，除非你并不需要 */}
116+
<SafeAreaView>
117+
<Text>左边打开抽屉内容</Text>
118+
</SafeAreaView>
119+
</Drawer>
120+
</RootSiblingPortal>
121+
<Button onPress={() => setVisible(!visible)}>左边打开抽屉</Button>
122+
</SafeAreaView>
123+
);
124+
}
125+
```
57126
## props
58127

59128
| 参数 | 说明 | 类型 | 默认值 |

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

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,6 @@ Ellipsis 超出省略
77

88
```jsx
99
import { Fragment } from 'react';
10-
import { View, Text } from 'react-native';
1110
import { Ellipsis } from '@uiw/react-native';
1211

1312
function Demo() {

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

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -112,6 +112,7 @@ class Demo extends Component {
112112
<!--DemoStart-->
113113
```js
114114
import { Empty } from '@uiw/react-native';
115+
import {View, Text } from 'react-native';
115116

116117
class Demo extends Component {
117118
render() {

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

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -13,10 +13,10 @@ import { View, Input } from '@uiw/react-native';
1313
export default class BasicInputExample extends React.Component {
1414
render() {
1515
return <View>
16-
<Input style={styles.input} onChange={(value) => {this.setState({value})}} value={this.state.value} />
17-
<Input style={styles.input} extra="小数" />
18-
<Input style={styles.input} error />
19-
<Input style={styles.input} type="phone" />
16+
<Input onChange={(value) => {this.setState({value})}} value={this.state.value} />
17+
<Input extra="小数" />
18+
<Input error />
19+
<Input type="phone" />
2020
</View>
2121
}
2222
}

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

Lines changed: 1 addition & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -26,14 +26,11 @@ function Demo() {
2626

2727
<!--DemoStart-->
2828
```jsx
29-
import { View } from 'react-native';
3029
import { Button，Loader } from '@uiw/react-native';
3130

3231
function Demo() {
3332
return (
34-
<View style={{ minHeight: 60 }}>
35-
<Loader color="red" />
36-
</View>
33+
<Loader color="red" />
3734
);
3835
}
3936
```

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

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -7,9 +7,9 @@ MaskLayer 遮罩层
77

88
<!--DemoStart-->
99
```jsx
10-
import React, { Component, Fragment } from 'react';
11-
import { View, Text, Alert, SafeAreaView } from 'react-native';
12-
import { Modal, Button, MaskLayer } from '@uiw/react-native';
10+
import { Fragment } from 'react';
11+
import { Text, SafeAreaView } from 'react-native';
12+
import { Button, MaskLayer } from '@uiw/react-native';
1313

1414
export default () => {
1515
const [visible, setVisible] = useState(true);
@@ -20,7 +20,9 @@ export default () => {
2020
onDismiss={() => {
2121
setVisible(false);
2222
}}>
23+
<SafeAreaView>
2324
<Text style={{color: '#fff'}}>展示内容</Text>
25+
</SafeAreaView>
2426
</MaskLayer>
2527
<Button
2628
onPress={() => {

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

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -7,8 +7,8 @@ Modal 模态框
77

88
<!--DemoStart-->
99
```jsx
10-
import React, { Component, Fragment } from 'react';
11-
import { View, Text, Alert, SafeAreaView } from 'react-native';
10+
import { Component, Fragment } from 'react';
11+
import { View, Text, SafeAreaView } from 'react-native';
1212
import { Modal, Button } from '@uiw/react-native';
1313

1414
export default class ButtonGroupView extends Component {

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@ Result 结果页
77

88
```jsx
99
import { Text } from 'react-native';
10-
import { Result, Icon } from '@uiw/react-native';
10+
import { Result, Icon, Del } from '@uiw/react-native';
1111

1212
function Demo() {
1313
return (

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ SearchBar 模糊搜素组件
44
## 基础示例
55

66
```jsx
7-
import { Result, Icon } from '@uiw/react-native';
7+
import { SearchBar } from '@uiw/react-native';
88

99
function Demo() {
1010
return (

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

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -6,8 +6,7 @@ SelectCascader 级联选择
66
## 基础示例
77

88
```jsx
9-
import { Text } from 'react-native';
10-
import React, { Component } from 'react';
9+
import { Component } from 'react';
1110
import { SelectCascader } from '@uiw/react-native';
1211

1312

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

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -9,9 +9,9 @@ Slider 滑块输入条
99
## 基础示例
1010

1111
```jsx
12-
import { Fragment } from 'react';
12+
import { Fragment, useState } from 'react';
1313
import { Text } from 'react-native';
14-
import { Drawer } from '@uiw/react-native';
14+
import { Slider } from '@uiw/react-native';
1515

1616
function Demo() {
1717
const [value, setValue] = useState(0.3);
@@ -30,8 +30,8 @@ function Demo() {
3030
## 不显示滑块
3131

3232
```jsx
33-
import { Fragment } from 'react';
34-
import { Drawer } from '@uiw/react-native';
33+
import { Fragment,useState } from 'react';
34+
import { Slider } from '@uiw/react-native';
3535

3636
function Demo() {
3737
const [value, setValue] = useState(0.3);
@@ -50,8 +50,8 @@ function Demo() {
5050
## 设置步长
5151

5252
```jsx
53-
import { Fragment } from 'react';
54-
import { Drawer } from '@uiw/react-native';
53+
import { Fragment, useState } from 'react';
54+
import { Slider } from '@uiw/react-native';
5555

5656
function Demo() {
5757
const [value, setValue] = useState(0.3);

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

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,8 @@ SpeedDial 悬浮标记组件按下时，浮动动作按钮可以以快速显示
77

88
```jsx
99
import { Fragment } from 'react';
10-
import { SpeedDial } from '@uiw/react-native';
10+
import { SpeedDial, Icon } from '@uiw/react-native';
11+
import { Text } from '@uiw/react-native';
1112

1213
function Demo() {
1314
return (
@@ -42,7 +43,7 @@ function Demo() {
4243

4344
```jsx
4445
import { Fragment } from 'react';
45-
import { Rating, Icon } from '@uiw/react-native';
46+
import { SpeedDial, Icon } from '@uiw/react-native';
4647
function Demo() {
4748
return (
4849
<Fragment>

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -45,7 +45,7 @@ export default class BasicSwipeActionExample extends React.Component {
4545
onOpen={() => console.log('open')}
4646
onClose={() => console.log('close')}
4747
>
48-
<View style={styles.view}>
48+
<View>
4949
<Text>滑动</Text>
5050
</View>
5151
</SwipeAction>

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

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@ Switch 开关
99
## 基础示例
1010

1111
```jsx
12-
import { Spacing,Flex, Switch } from '@uiw/react-native';
12+
import { Switch } from '@uiw/react-native';
1313

1414
function Demo() {
1515
return (
@@ -44,7 +44,7 @@ function Demo() {
4444

4545
```jsx
4646
import { useState } from 'react';
47-
import { Spacing,Flex, Switch } from '@uiw/react-native';
47+
import { Switch } from '@uiw/react-native';
4848

4949
function Demo() {
5050
const [checked, setChecked] = useState(false);

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -38,7 +38,7 @@ function Demo() {
3838

3939
```jsx
4040
import { Fragment } from 'react';
41-
import { Rating, Icon } from '@uiw/react-native';
41+
import { Tabs, Icon } from '@uiw/react-native';
4242
function Demo() {
4343
return (
4444
<Fragment>

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

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -14,8 +14,7 @@ function Demo() {
1414
return (
1515
<Fragment>
1616
<Tile
17-
imageSrc={require('../../image/tileBG.png')}
18-
// imageSrc={{uri: 'https://img11.51tietu.net/pic/2016-071418/20160714181543xyu10ukncwf221991.jpg'}}
17+
imageSrc={require('xxx.png')}
1918
imageProps={{resizeMode:'contain'}}
2019
containerStyle={{marginTop: 10}}
2120
imageContainerStyle={{backgroundColor:'#ccc'}}

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

Lines changed: 14 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -6,42 +6,36 @@ Tooltip 工具提示
66
## 基础示例
77

88
```jsx
9-
import { Fragment } from 'react';
109
import { Tooltip } from '@uiw/react-native';
1110

1211

1312
function Demo() {
1413
return (
15-
<Fragment>
16-
<Tooltip title='我是一个文本'>
17-
<Text style={styles.textStyle}>我是一个文本</Text>
18-
</Tooltip>
19-
</Fragment>
14+
<Tooltip title='我是一个文本'>
15+
<Text>我是一个文本</Text>
16+
</Tooltip>
2017
);
2118
}
2219
```
2320

2421
## 使用 自定义提示内容
2522

2623
```jsx
27-
import { Fragment } from 'react';
2824
import { Tooltip, Icon } from '@uiw/react-native';
2925

3026
function Demo() {
3127
return (
32-
<Fragment>
33-
<Tooltip
34-
backgroundColor="pink"
35-
width={30}
36-
height={30}
37-
title={(<View>
38-
<Text>我是一个苹果</Text>
39-
<Icon name='apple' color="#fff" />
40-
</View>)}
41-
>
42-
<Icon name='apple' color="red" />
43-
</Tooltip>
44-
</Fragment>
28+
<Tooltip
29+
backgroundColor="pink"
30+
width={30}
31+
height={30}
32+
title={(<View>
33+
<Text>我是一个苹果</Text>
34+
<Icon name='apple' color="#fff" />
35+
</View>)}
36+
>
37+
<Icon name='apple' color="red" />
38+
</Tooltip>
4539
);
4640
}
4741
```

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

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -6,8 +6,9 @@ TransitionImage 图像
66
## 基础示例
77

88
```jsx
9-
import { Fragment, ActivityIndicator } from 'react';
9+
import { Fragment } from 'react';
1010
import { TransitionImage } from '@uiw/react-native';
11+
import {ActivityIndicator} from 'react-native';
1112

1213

1314
function Demo() {
@@ -34,7 +35,6 @@ function Demo() {
3435

3536
```ts
3637
import { ImageProps } from 'react-native';
37-
import { TransitionImage } from '@uiw/react-native';
3838

3939
export interface TransitionImage extends ImageProps{
4040
/* 按下组件时的回调函数 */

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

Lines changed: 0 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -67,18 +67,6 @@ function Demo() {
6767
}
6868
```
6969

70-
## 段落
71-
72-
```jsx
73-
import { P } from '@uiw/react-native';
74-
75-
function Demo() {
76-
return (
77-
<P>这段文字加粗</P>
78-
);
79-
}
80-
```
81-
8270
## 换行
8371

8472
```jsx

0 commit comments

Comments
 (0)