Skip to content

Commit 50abf8d

Browse files
silentcloudsilentcloud
committed
refactor rn-index page
1 parent 42da140 commit 50abf8d

File tree

3 files changed

+130
-143
lines changed

3 files changed

+130
-143
lines changed

‎rn-kitchen-sink/components/RnIndex.js

+42-53
Original file line numberDiff line numberDiff line change
@@ -7,15 +7,24 @@ import {
77
} from 'react-native';
88
import { Actions } from 'react-native-router-flux';
99
import { List, SearchBar } from 'antd-mobile';
10-
import { APIS, COMPONENTS } from '../demoList';
10+
import { UIVIEWS, UICONTROLS, OTHER, UIBARS } from '../demoList';
11+
12+
const styles = StyleSheet.create({
13+
container: {
14+
flex: 1,
15+
paddingTop: Platform.OS === 'ios' ? 64 : 54,
16+
},
17+
});
1118

1219
export default class RnIndex extends React.Component {
1320
constructor(props) {
1421
super(props);
1522
this.state = {
1623
searchText: '',
17-
APIS,
18-
COMPONENTS,
24+
uiViews: UIVIEWS,
25+
uiControls: UICONTROLS,
26+
other: OTHER,
27+
uiBars: UIBARS,
1928
};
2029

2130
this.search = this.search.bind(this);
@@ -37,67 +46,47 @@ export default class RnIndex extends React.Component {
3746
const regex = new RegExp(String(text), 'i');
3847
const filter = (component) => regex.test(component.title);
3948

40-
4149
this.setState({
42-
APIS: APIS.filter(filter),
43-
COMPONENTS: COMPONENTS.filter(filter),
50+
uiViews: UIVIEWS.filter(filter),
51+
uiControls: UICONTROLS.filter(filter),
52+
other: OTHER.filter(filter),
53+
uiBars: UIBARS.filter(filter),
4454
searchText: text,
4555
});
4656
}
4757

4858
render() {
49-
const { APIS, COMPONENTS } = this.state;
59+
const { uiViews, uiControls, other, uiBars } = this.state;
5060
return (
5161
<View style={styles.container}>
52-
<SearchBar
53-
onChange={(text) => {this.search(text); }}
54-
/>
62+
<SearchBar onChange={(text) => { this.search(text); }} />
5563
<ScrollView>
56-
<List
57-
title="APIS"
58-
style={{
59-
marginTop: 0,
60-
marginBottom: 0,
61-
}}
62-
>
63-
<List.Body>
64-
{APIS.map((el, index) => {
65-
return (<List.Item
66-
thumb={el.icon}
67-
onClick={() => { this.onPressRow(el); }}
68-
arrow="horizontal"
69-
key={`APIS-${index}`}
70-
>{`${el.title} ${el.description}`}</List.Item>);
71-
})}
72-
</List.Body>
73-
</List>
74-
<List
75-
title="COMPONENTS"
76-
style={{
77-
marginTop: 0,
78-
marginBottom: 0,
79-
}}
80-
>
81-
<List.Body>
82-
{COMPONENTS.map((el, index) => {
83-
return (<List.Item
84-
thumb={el.icon}
85-
onClick={() => { this.onPressRow(el); }}
86-
arrow="horizontal"
87-
key={`COMPONENTS-${index}`}
88-
>{`${el.title} ${el.description}`}</List.Item>);
89-
})}
90-
</List.Body>
91-
</List>
64+
{
65+
[['UI Views', uiViews],
66+
['UI Controls', uiControls],
67+
['Other', other],
68+
['UI Bars', uiBars]].map((item, i) => (
69+
<List key={i} title={item[0]} style={{
70+
marginTop: 0,
71+
marginBottom: 0,
72+
}}>
73+
<List.Body>
74+
{
75+
item[1].map(el => (
76+
<List.Item
77+
thumb={el.icon}
78+
onClick={() => { this.onPressRow(el); }}
79+
arrow="horizontal"
80+
key={el.title}
81+
>{`${el.title} ${el.description}`}</List.Item>
82+
))
83+
}
84+
</List.Body>
85+
</List>
86+
))
87+
}
9288
</ScrollView>
9389
</View>
9490
);
9591
}
9692
}
97-
98-
const styles = StyleSheet.create({
99-
container: {
100-
flex: 1,
101-
paddingTop: Platform.OS === 'ios' ? 64 : 54,
102-
},
103-
});

‎rn-kitchen-sink/demoList.js

+86-88
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,47 @@
11
module.exports = {
2-
APIS: [
2+
UIVIEWS: [
33
{
44
title: 'ActionSheet',
55
description: '动作面板',
66
icon: 'https://zos.alipayobjects.com/rmsportal/sTvsgvivVKnqQtS.png',
77
module: require('../components/action-sheet/demo/basic'),
88
},
9+
{
10+
title: 'Card',
11+
description: '卡片',
12+
icon: 'https://os.alipayobjects.com/rmsportal/kkQBRgZgcqSyMPS.png',
13+
module: require('../components/card/demo/basic'),
14+
},
15+
{
16+
title: 'Drawer',
17+
description: '抽屉',
18+
icon: 'https://os.alipayobjects.com/rmsportal/kpbezGjgdRhGfMa.png',
19+
module: require('../components/drawer/demo/basic'),
20+
},
21+
{
22+
title: 'List',
23+
description: '列表',
24+
icon: 'https://os.alipayobjects.com/rmsportal/wlNeoTpEKIpTcOW.png',
25+
module: require('../components/list/demo/basic'),
26+
},
27+
{
28+
title: 'ListView',
29+
description: '长列表',
30+
icon: 'https://os.alipayobjects.com/rmsportal/wlNeoTpEKIpTcOW.png',
31+
module: require('../components/list-view/demo/basic'),
32+
},
33+
{
34+
title: 'Modal',
35+
description: '对话框',
36+
icon: 'https://os.alipayobjects.com/rmsportal/AMszKQQdMvMmYng.png',
37+
module: require('../components/modal/demo/basic'),
38+
},
39+
{
40+
title: 'Popover',
41+
description: '浮动菜单',
42+
icon: 'https://os.alipayobjects.com/rmsportal/HhilRXHawmUwlML.png',
43+
module: require('../components/popover/demo/basic'),
44+
},
945
{
1046
title: 'Popup', // 必须
1147
description: '弹出层',
@@ -19,30 +55,24 @@ module.exports = {
1955
module: require('../components/toast/demo/basic'),
2056
},
2157
],
22-
COMPONENTS: [
58+
UICONTROLS: [
2359
{
2460
title: 'ActivityIndicator',
2561
description: '活动指示器',
2662
icon: 'https://zos.alipayobjects.com/rmsportal/ZLKbJvxVNSmsOwW.png',
2763
module: require('../components/activity-indicator/demo/basic'),
2864
},
29-
{
30-
title: 'Badge',
31-
description: '徽标数',
32-
icon: 'https://os.alipayobjects.com/rmsportal/nSDcLEWgUrOkCJq.png',
33-
module: require('../components/badge/demo/basic'),
34-
},
3565
{
3666
title: 'Button',
3767
description: '按钮',
3868
icon: 'https://os.alipayobjects.com/rmsportal/lOXYjfSRPpkwudh.png',
3969
module: require('../components/button/demo/basic'),
4070
},
4171
{
42-
title: 'Card',
43-
description: '卡片',
44-
icon: 'https://os.alipayobjects.com/rmsportal/kkQBRgZgcqSyMPS.png',
45-
module: require('../components/card/demo/basic'),
72+
title: 'Badge',
73+
description: '徽标数',
74+
icon: 'https://os.alipayobjects.com/rmsportal/nSDcLEWgUrOkCJq.png',
75+
module: require('../components/badge/demo/basic'),
4676
},
4777
{
4878
title: 'Carousel', // 必须
@@ -62,24 +92,6 @@ module.exports = {
6292
icon: 'https://os.alipayobjects.com/rmsportal/XjBSEKVWMeIulGv.png',
6393
module: require('../components/date-picker/demo/popup'),
6494
},
65-
{
66-
title: 'Drawer',
67-
description: '抽屉',
68-
icon: 'https://os.alipayobjects.com/rmsportal/kpbezGjgdRhGfMa.png',
69-
module: require('../components/drawer/demo/basic'),
70-
},
71-
{
72-
title: 'Flex',
73-
description: 'Flex 布局',
74-
icon: 'https://os.alipayobjects.com/rmsportal/KZtGFWmnMUFpiSE.png',
75-
module: require('../components/flex/demo/basic'),
76-
},
77-
{
78-
title: 'Popover',
79-
description: '浮动菜单',
80-
icon: 'https://os.alipayobjects.com/rmsportal/HhilRXHawmUwlML.png',
81-
module: require('../components/popover/demo/basic'),
82-
},
8395
{
8496
title: 'ImagePicker',
8597
description: '图片选择',
@@ -92,42 +104,6 @@ module.exports = {
92104
icon: 'https://os.alipayobjects.com/rmsportal/aDugjLTLBeQffgX.png',
93105
module: require('../components/input-item/demo/basic'),
94106
},
95-
{
96-
title: 'List',
97-
description: '列表',
98-
icon: 'https://os.alipayobjects.com/rmsportal/wlNeoTpEKIpTcOW.png',
99-
module: require('../components/list/demo/basic'),
100-
},
101-
{
102-
title: 'ListView',
103-
description: '长列表',
104-
icon: 'https://os.alipayobjects.com/rmsportal/wlNeoTpEKIpTcOW.png',
105-
module: require('../components/list-view/demo/basic'),
106-
},
107-
// {
108-
// title: 'Menu',
109-
// description: '菜单',
110-
// icon: 'https://os.alipayobjects.com/rmsportal/AMszKQQdMvMmYng.png',
111-
// module: require('../components/menu/demo/basic'),
112-
// },
113-
{
114-
title: 'Modal',
115-
description: '对话框',
116-
icon: 'https://os.alipayobjects.com/rmsportal/AMszKQQdMvMmYng.png',
117-
module: require('../components/modal/demo/basic'),
118-
},
119-
{
120-
title: 'NoticeBar',
121-
description: '顶部提示',
122-
icon: 'https://os.alipayobjects.com/rmsportal/AraRKTSdXQbKkGv.png',
123-
module: require('../components/notice-bar/demo/basic'),
124-
},
125-
{
126-
title: 'Pagination',
127-
description: '分页器',
128-
icon: 'https://zos.alipayobjects.com/rmsportal/VmTKwvaRaIWOXrh.png',
129-
module: require('../components/pagination/demo/basic'),
130-
},
131107
{
132108
title: 'Picker',
133109
description: '选择器',
@@ -141,10 +117,10 @@ module.exports = {
141117
module: require('../components/progress/demo/basic'),
142118
},
143119
{
144-
title: 'RefreshControl',
145-
description: '下拉刷新',
146-
icon: 'https://os.alipayobjects.com/rmsportal/kmDibjGUbFrdeeY.png',
147-
module: require('../components/refresh-control/demo/basic'),
120+
title: 'Pagination',
121+
description: '分页器',
122+
icon: 'https://zos.alipayobjects.com/rmsportal/VmTKwvaRaIWOXrh.png',
123+
module: require('../components/pagination/demo/basic'),
148124
},
149125
{
150126
title: 'Radio',
@@ -153,16 +129,10 @@ module.exports = {
153129
module: require('../components/radio/demo/basic'), // 必须
154130
},
155131
{
156-
title: 'SegmentedControl',
157-
description: '分段控制',
158-
icon: 'https://os.alipayobjects.com/rmsportal/oeOvbvMpweuBOvO.png',
159-
module: require('../components/segmented-control/demo/basic'),
160-
},
161-
{
162-
title: 'SearchBar',
163-
description: '搜索条',
164-
icon: 'https://os.alipayobjects.com/rmsportal/WzZoGzTRKzQgMWi.png',
165-
module: require('../components/search-bar/demo/basic'),
132+
title: 'RefreshControl',
133+
description: '下拉刷新',
134+
icon: 'https://os.alipayobjects.com/rmsportal/kmDibjGUbFrdeeY.png',
135+
module: require('../components/refresh-control/demo/basic'),
166136
},
167137
{
168138
title: 'Slider',
@@ -183,10 +153,10 @@ module.exports = {
183153
module: require('../components/steps/demo/basic'), // 必须
184154
},
185155
{
186-
title: 'SwipeAction', // 必须
187-
description: '滑动或长按操作',
188-
icon: 'https://os.alipayobjects.com/rmsportal/OJgqKyrKGdIEfwp.png',
189-
module: require('../components/swipe-action/demo/basic'),
156+
title: 'SegmentedControl',
157+
description: '分段控制',
158+
icon: 'https://os.alipayobjects.com/rmsportal/oeOvbvMpweuBOvO.png',
159+
module: require('../components/segmented-control/demo/basic'),
190160
},
191161
{
192162
title: 'Switch',
@@ -195,10 +165,10 @@ module.exports = {
195165
module: require('../components/switch/demo/basic'),
196166
},
197167
{
198-
title: 'TabBar',
199-
description: 'APP 选项卡',
200-
icon: 'https://os.alipayobjects.com/rmsportal/oeOvbvMpweuBOvO.png',
201-
module: require('../components/tab-bar/demo/basic'),
168+
title: 'SwipeAction', // 必须
169+
description: '滑动或长按操作',
170+
icon: 'https://os.alipayobjects.com/rmsportal/OJgqKyrKGdIEfwp.png',
171+
module: require('../components/swipe-action/demo/basic'),
202172
},
203173
{
204174
title: 'Tabs', // 必须
@@ -218,6 +188,14 @@ module.exports = {
218188
icon: 'https://os.alipayobjects.com/rmsportal/aDugjLTLBeQffgX.png',
219189
module: require('../components/textarea-item/demo/basic'),
220190
},
191+
],
192+
OTHER: [
193+
{
194+
title: 'Flex',
195+
description: 'Flex 布局',
196+
icon: 'https://os.alipayobjects.com/rmsportal/KZtGFWmnMUFpiSE.png',
197+
module: require('../components/flex/demo/basic'),
198+
},
221199
{
222200
title: 'WhiteSpace',
223201
description: '上下留白',
@@ -231,4 +209,24 @@ module.exports = {
231209
module: require('../components/wing-blank/demo/basic'),
232210
},
233211
],
212+
UIBARS: [
213+
{
214+
title: 'NoticeBar',
215+
description: '顶部提示',
216+
icon: 'https://os.alipayobjects.com/rmsportal/AraRKTSdXQbKkGv.png',
217+
module: require('../components/notice-bar/demo/basic'),
218+
},
219+
{
220+
title: 'SearchBar',
221+
description: '搜索条',
222+
icon: 'https://os.alipayobjects.com/rmsportal/WzZoGzTRKzQgMWi.png',
223+
module: require('../components/search-bar/demo/basic'),
224+
},
225+
{
226+
title: 'TabBar',
227+
description: 'APP 选项卡',
228+
icon: 'https://os.alipayobjects.com/rmsportal/oeOvbvMpweuBOvO.png',
229+
module: require('../components/tab-bar/demo/basic'),
230+
},
231+
],
234232
};

0 commit comments

Comments
 (0)