Skip to content

Commit 67430ea

Browse files
yaochuxiayaochuxia
committed
docs:修改组件,添加文档
1 parent 603aae4 commit 67430ea

File tree

3 files changed

+131
-40
lines changed

3 files changed

+131
-40
lines changed

‎example/examples/src/routes/NoticeBar/index.tsx‎

Lines changed: 38 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,9 @@
1-
import React from 'react'
1+
import React, {Component} from 'react'
22
import { Image, Text, View } from 'react-native'
3-
import { NoticeBar, WingBlank } from '@uiw/react-native';
3+
import { NoticeBar, Spacing } from '@uiw/react-native';
44

55

6-
export default class NoticeBarExample extends React.Component{
6+
export default class NoticeBarExample extends Component{
77
render() {
88
const customIcon = (
99
<Image
@@ -15,16 +15,41 @@ export default class NoticeBarExample extends React.Component{
1515
/>
1616
)
1717
return (
18-
<View style={{ marginTop: 10 }}>
19-
<WingBlank size="large">
20-
{/* marqueeProps.style only support text style props*/}
21-
<NoticeBar
22-
onPress={() => console.log('click')}
23-
marqueeProps={{ loop: true, style: { fontSize: 12, color: 'red' } }}>
24-
Notice: The arrival time of incomes and transfers of Yu 'E Bao will be
25-
delayed during National Day.
26-
</NoticeBar>
27-
</WingBlank>
18+
<View style={{ marginTop: 10 }}>
19+
<NoticeBar
20+
onPress={() => console.log('click')}
21+
marqueeProps={{ loop: true, style: { fontSize: 12, color: 'red' } }}>
22+
Notice: The arrival time of incomes and transfers of Yu 'E Bao will be
23+
delayed during National Day.
24+
</NoticeBar>
25+
<Spacing />
26+
<NoticeBar mode="closable" onPress={() => console.log('will close')}>
27+
Notice: The arrival time of incomes and transfers of Yu 'E Bao will be
28+
delayed during National Day.
29+
</NoticeBar>
30+
<Spacing />
31+
<NoticeBar mode="closable" icon={customIcon}>
32+
Customized icon.
33+
</NoticeBar>
34+
<Spacing />
35+
<NoticeBar mode="link" onPress={() => console.log('link')}>
36+
Notice: The arrival time of incomes and transfers of Yu 'E Bao will be
37+
delayed during National Day.
38+
</NoticeBar>
39+
<Spacing />
40+
<NoticeBar mode="closable" icon={undefined}>
41+
Remove the default icon.
42+
</NoticeBar>
43+
<Spacing />
44+
<NoticeBar
45+
mode="closable"
46+
action={<Text style={{ color: '#a1a1a1' }}>不再提示</Text>}>
47+
Closable demo for `actionText`.
48+
</NoticeBar>
49+
<Spacing />
50+
<NoticeBar mode="link" action={<Text>去看看</Text>}>
51+
Link demo for `actionText`.
52+
</NoticeBar>
2853
</View>
2954
)
3055
}

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

Lines changed: 74 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,74 @@
1+
NoticeBar 通告栏
2+
---
3+
4+
在导航栏下方，一般用作系统提醒、活动提醒等通知。
5+
6+
### 基础示例
7+
8+
<!--DemoStart-->
9+
```jsx
10+
import React from 'react';
11+
import { NoticeBar, Spacing } from '@uiw/react-native';
12+
13+
const NoticeBarExample = () => {
14+
const customIcon = (
15+
<Image
16+
// tslint:disable-next-line:jsx-no-multiline-js
17+
source={{
18+
uri: 'https://zos.alipayobjects.com/rmsportal/bRnouywfdRsCcLU.png',
19+
}}
20+
style={{ width: 12, height: 12 }}
21+
/>
22+
)
23+
return (
24+
<View style={{ marginTop: 10 }}>
25+
<NoticeBar
26+
onPress={() => console.log('click')}
27+
marqueeProps={{ loop: true, style: { fontSize: 12, color: 'red' } }}>
28+
Notice: The arrival time of incomes and transfers of Yu 'E Bao will be
29+
delayed during National Day.
30+
</NoticeBar>
31+
<Spacing />
32+
<NoticeBar mode="closable" onPress={() => console.log('will close')}>
33+
Notice: The arrival time of incomes and transfers of Yu 'E Bao will be
34+
delayed during National Day.
35+
</NoticeBar>
36+
<Spacing />
37+
<NoticeBar mode="closable" icon={customIcon}>
38+
Customized icon.
39+
</NoticeBar>
40+
<Spacing />
41+
<NoticeBar mode="link" onPress={() => console.log('link')}>
42+
Notice: The arrival time of incomes and transfers of Yu 'E Bao will be
43+
delayed during National Day.
44+
</NoticeBar>
45+
<Spacing />
46+
<NoticeBar mode="closable" icon={undefined}>
47+
Remove the default icon.
48+
</NoticeBar>
49+
<Spacing />
50+
<NoticeBar
51+
mode="closable"
52+
action={<Text style={{ color: '#a1a1a1' }}>不再提示</Text>}>
53+
Closable demo for `actionText`.
54+
</NoticeBar>
55+
<Spacing />
56+
<NoticeBar mode="link" action={<Text>去看看</Text>}>
57+
Link demo for `actionText`.
58+
</NoticeBar>
59+
</View>
60+
)
61+
}
62+
export default NoticeBarExample;
63+
```
64+
<!--End-->
65+
66+
## Props
67+
68+
属性 | 说明 | 类型 | 默认值
69+
----|-----|------|------
70+
| mode | 提示类型，可选 `closable`,`link` | String | '' |
71+
| icon | 在开始位置设置图标 | ReactNode | `<Icon type={require('./trips.svg')} size="xxs" />`|
72+
| onPress | 点击关闭或者操作区域的回调函数 | (): void | |
73+
| marqueeProps | marquee 参数 | Object | `{loop: false, leading: 500, trailing: 800, fps: 40, style: {}}` |
74+
| action | 用于替换操作 icon 的文案 | ReactElement | |

‎packages/core/src/NoticeBar/index.tsx‎

Lines changed: 19 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import React, {Component} from 'react';
1+
import React, {useState} from 'react';
22
import { StyleProp, Text, TouchableWithoutFeedback, View, ViewStyle, StyleSheet } from 'react-native';
33
import Icon from '../Icon';
44
import Marquee, { MarqueeProps } from './Marquee'
@@ -14,32 +14,24 @@ export type NoticeBarProps = {
1414
marqueeProps?: MarqueeProps
1515
};
1616

17-
export default class NoticeBar extends Component<NoticeBarProps>{
18-
constructor(props:any) {
19-
super(props)
20-
this.state = {
21-
show: true,
22-
}
23-
}
17+
export default (props: NoticeBarProps) => {
18+
const [show, setShow] = useState(true);
2419

25-
onPress = () => {
26-
const { mode, onPress } = this.props
20+
const onPress = () => {
21+
const { mode, onPress } = props
2722
if (onPress) {
28-
onPress()
23+
onPress();
2924
}
3025
if (mode === 'closable') {
31-
this.setState({
32-
show: false,
33-
})
26+
setShow(false)
3427
}
3528
}
36-
render() {
37-
let { children, mode, icon, style, action, marqueeProps } = this.props;
29+
let { children, mode, icon, style, action, marqueeProps } = props;
3830
let operationDom: any = null;
39-
icon = typeof icon === 'undefined' ? (<Icon fill="notification" color="#f4333c" />) : (icon);
31+
icon = typeof icon === 'undefined' ? (<Icon name="notification" color="#f4333c" size={15} />) : (icon);
4032
if (mode === 'closable') {
4133
operationDom = (
42-
<TouchableWithoutFeedback onPress={this.onPress}>
34+
<TouchableWithoutFeedback onPress={onPress}>
4335
<View style={styles.actionWrap}>
4436
{action ? action : <Text style={[styles.close]}>×</Text>}
4537
</View>
@@ -65,15 +57,14 @@ export default class NoticeBar extends Component<NoticeBarProps>{
6557
</View>
6658
{operationDom}
6759
</View>
68-
)
69-
return (
70-
<View>
71-
{mode === 'closable' ? (main) : (
72-
<TouchableWithoutFeedback onPress={this.onPress}>{ main}</TouchableWithoutFeedback>
73-
)}
74-
</View>
7560
)
76-
}
61+
return (
62+
<View>
63+
{show ? (mode === 'closable' ? (main) : (
64+
<TouchableWithoutFeedback onPress={onPress}>{ main}</TouchableWithoutFeedback>
65+
)) : null}
66+
</View>
67+
)
7768
}
7869

7970
const styles = StyleSheet.create({
@@ -83,6 +74,7 @@ const styles = StyleSheet.create({
8374
overflow: 'hidden',
8475
flexDirection: 'row',
8576
alignItems: 'center',
77+
color: '#f4333c',
8678
},
8779
container: {
8880
flex: 1,
@@ -98,7 +90,7 @@ const styles = StyleSheet.create({
9890
marginLeft: 5,
9991
},
10092
left15: {
101-
// marginLeft: 15,
93+
marginLeft: 15,
10294
},
10395
actionWrap: {
10496
marginRight: 15,

0 commit comments

Comments
 (0)