| 1 | ## Picker 选择器
|
| 2 |
|
| 3 |
|
| 4 | ### 基础版
|
| 5 | ```jsx
|
| 6 | <Text onPress={() => this.setState({ visible: true })}>戳我</Text>
|
| 7 | {this.state.visible && (
|
| 8 | <Picker onCancel={} onChange={}>
|
| 9 | <Picker.Item>名称错误</Picker.Item>
|
| 10 | <Picker.Item>店铺拆迁</Picker.Item>
|
| 11 | <Picker.Item>位置错误</Picker.Item>
|
| 12 | </Picker>
|
| 13 | )}
|
| 14 | ```
|
| 15 |
|
| 16 |
|
| 17 | ### 选中
|
| 18 | ```jsx
|
| 19 | <Text onPress={() => this.setState({ visible: true })}>戳我</Text>
|
| 20 | {this.state.visible && (
|
| 21 | <Picker>
|
| 22 | <Picker.Item picked>名称错误</Picker.Item>
|
| 23 | <Picker.Item>店铺拆迁</Picker.Item>
|
| 24 | <Picker.Item>位置错误</Picker.Item>
|
| 25 | </Picker>
|
| 26 | )}
|
| 27 | ```
|
| 28 |
|
| 29 |
|
| 30 | ### 替换值
|
| 31 | ```jsx
|
| 32 | <Text onPress={() => this.setState({ visible: true })}>戳我</Text>
|
| 33 | {this.state.visible && (
|
| 34 | <Picker>
|
| 35 | <Picker.Item value={{ error: '', key: '', value: '' }}>名称错误</Picker.Item>
|
| 36 | <Picker.Item>店铺拆迁</Picker.Item>
|
| 37 | <Picker.Item>位置错误</Picker.Item>
|
| 38 | </Picker>
|
| 39 | )}
|
| 40 | ```
|
| 41 |
|
| 42 |
|
| 43 | ### 多选
|
| 44 | ```jsx
|
| 45 | <Text onPress={() => this.setState({ visible: true })}>戳我</Text>
|
| 46 | {this.state.visible && (
|
| 47 | <Picker multiple onDone={}>
|
| 48 | <Picker.Header>你好</Picker.Header>
|
| 49 | <Picker.Item>名称错误</Picker.Item>
|
| 50 | <Picker.Item>店铺拆迁</Picker.Item>
|
| 51 | <Picker.Item>位置错误</Picker.Item>
|
| 52 | </Picker>
|
| 53 | )}
|
| 54 | ```
|
| 55 |
|
| 56 |
|
| 57 | ### 自定义
|
| 58 | > `View` 要根据 `Picker.Item` 向子传递的 `picked` 属性实现相应的样式
|
| 59 | ```jsx
|
| 60 | <Text onPress={() => this.setState({ visible: true })}>戳我</Text>
|
| 61 | {this.state.visible && (
|
| 62 | <Picker>
|
| 63 | <Picker.Item>
|
| 64 | <Text>名称错误</Text>
|
| 65 | </Picker.Item>
|
| 66 | <Picker.Item picked value>
|
| 67 | <View>店铺拆迁</View>
|
| 68 | </Picker.Item>
|
| 69 | <Picker.Item>
|
| 70 | <SwagCheck></SwagCheck>
|
| 71 | </Picker.Item>
|
| 72 | </Picker>
|
| 73 | )}
|
| 74 | ```
|