1. 程式人生 > >ReactNative中國省-市-區WheelPicker元件

ReactNative中國省-市-區WheelPicker元件

github地址
相容IOS和安卓,中國省-市-區WheelPicker選擇器的RN元件.

propTypes

isVisible: PropTypes.bool,
selectedProvince: PropTypes.string,
selectedCity: PropTypes.string,
selectedArea: PropTypes.string,
navBtnColor: PropTypes.string,
animationType: PropTypes.string,
transparent: PropTypes.bool,
onSubmit: PropTypes.func,
onCancel: PropTypes.func,

Install安裝

npm install rn-wheel-picker-china-region --save

Usage使用

import ChinaRegionWheelPicker from 'rn-wheel-picker-china-region';

// 用法一
<ChinaRegionWheelPicker
  onSubmit={(params) => this.setState({ region1: `${params.province},${params.city},${params.area}` })}
  onCancel={() => console.log('cancel'
)} > <TextInput editable={false} placeholder="點選去選擇地區" value={this.state.region1} /> </ChinaRegionWheelPicker> // 用法二(參考Example目錄index.ios.js) <ChinaRegionWheelPicker isVisible={this.state.isPickerVisible} navBtnColor={'red'} selectedProvince={'廣東'} selectedCity
={'深圳'} selectedArea={'福田區'} transparent animationType={'fade'} onSubmit={this._onPressSubmit.bind(this)} // 點選確認_onPressSubmit onCancel={this._onPressCancel.bind(this)} // 點選取消_onPressCancel />
<TouchableOpacity onPress={this._onPress2Show.bind(this)} > <Text style={{ color: 'white' }}>{this.state.region2 || '點選去選擇地區' }</Text> </TouchableOpacity>

Show

rn-wheel-picker-china-region1

rn-wheel-picker-china-region2