Skip to content

Commit e3d8b78

Browse files
authored
feat(Stepper): Add Stepper component. (#179)
* 添加React Native组件 * 添加React Native组件 * 添加React Native组件 * 添加 Stepper 步进器组件 * 删除样式文件
1 parent 1262d65 commit e3d8b78

File tree

9 files changed

+743
-0
lines changed

9 files changed

+743
-0
lines changed

example/examples/src/routes.tsx

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -330,6 +330,14 @@ export const stackPageData: Routes[] = [
330330
description: '通告栏',
331331
},
332332
},
333+
{
334+
name: 'Stepper',
335+
component: require('./routes/Stepper').default,
336+
params: {
337+
title: 'Stepper 步进器',
338+
description: 'Stepper 步进器 用作增加或者减少当前数值。',
339+
},
340+
},
333341
{
334342
name: 'SpeedDial',
335343
component: require('./routes/SpeedDial').default,
Lines changed: 63 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,63 @@
1+
/* tslint:disable:no-console */
2+
import React from 'react'
3+
import { View } from 'react-native'
4+
import {List, Stepper} from '@uiw/react-native';
5+
import Layout from '../../Layout';
6+
const {Header} = Layout;
7+
8+
function onChange(value: any) {
9+
console.log('changed', value)
10+
}
11+
12+
export default class StepperExample extends React.Component<any, any> {
13+
14+
render() {
15+
const {route} = this.props;
16+
const description = route.params.description;
17+
const title = route.params.title;
18+
19+
const readOnly = (
20+
<Stepper
21+
key="1"
22+
max={999}
23+
min={1}
24+
readOnly={false}
25+
defaultValue={888}
26+
onChange={onChange}
27+
/>
28+
)
29+
return (
30+
<View style={{ flex:1 }}>
31+
<Header title={title} description={description} />
32+
<List>
33+
<List.Item
34+
extra={
35+
<Stepper
36+
key="0"
37+
max={9999}
38+
min={0}
39+
defaultValue={3}
40+
onChange={onChange}
41+
/>
42+
}>
43+
请选择您要购买iPhone 12 的数量:
44+
</List.Item>
45+
<List.Item extra={readOnly}>您当前选择的数量为: </List.Item>
46+
<List.Item
47+
extra={
48+
<Stepper
49+
key="2"
50+
disabled
51+
max={100}
52+
min={0}
53+
defaultValue={0}
54+
onChange={onChange}
55+
/>
56+
}>
57+
暂无库存:
58+
</List.Item>
59+
</List>
60+
</View>
61+
)
62+
}
63+
}

0 commit comments

Comments
 (0)