react-native-citys-picker

IOS & 安卓都兼容的中国地区选择器组件。该组件中使用到了第三方react-native-modal组件，有一个问题就是当弹出modal后，点击背景层关闭时，会出现闪烁问题，这个是使用了react-native-modal组件导致，见issues 解决方法

DEMO

安装

npm install react-native-citys-picker --save

使用

import CityPicker from 'react-native-citys-picker';

// ios用法一
<CityPicker
  onSubmit={(params) => this.setState({ region1: `${params.province},${params.city},${params.area}` })}
  onCancel={() => console.log('cancel')}
>
  <TextInput
    editable={false}
    placeholder="点击去选择地区"
    value={this.state.region1}
  />
</CityPicker>

// android用法一
<CityPicker
  onSubmit={(params) => this.setState({ region1: `${params.province},${params.city},${params.area}` })}
  onCancel={() => console.log('cancel')}
>
  <Text
    style={{ backgroundColor: '#FFF', width: 200, paddingVertical: 20, textAlign: 'center', color: 'black' }}
  >{this.state.region1 || '点击去选择地区'}</Text>
</CityPicker>

// 用法二(参考Example目录index.ios.js/android.ios.js)
<CityPicker
  isVisible={this.state.isPickerVisible}
  navBtnColor={'red'}
  selectedProvince={'广东'}
  selectedCity={'深圳'}
  selectedArea={'福田区'}
  transparent
  animationType={'down'}
  onSubmit={this._onPressSubmit.bind(this)} // 点击确认_onPressSubmit
  onCancel={this._onPressCancel.bind(this)} // 点击取消_onPressCancel
  androidPickerHeight={100}   // 安卓手机下可以设置picker区域的高度
/>

<TouchableOpacity
  onPress={this._onPress2Show.bind(this)}
>
  <Text style={{ color: 'white' }}>{this.state.region2 || '点击去选择地区' }</Text>
</TouchableOpacity>

属性设置

Prop | Type | Optional | Default | Description ----------------------- | ------ | -------- | --------- | ----------- title | string | | 选择地区 | modal标题 isVisible | bool | | false | 是否显示modal selectedProvince | string | Yes | 江西 | 选择省 selectedCity | string | Yes | 萍乡 | 选择市 selectedArea | string | Yes | 安源区 | 选择区 navBtnColor | string | Yes | #3896B2 | 按钮颜色 animationType | string | Yes | slide | 弹出方向，'up', 'down', 'left, or 'right' transparent | bool | Yes | true | 背景透明 onSubmit | func | Yes | | 确认时，将调用此函数 onCancel | func | Yes | | 取消时，将调用此函数 androidPickerHeight | number | Yes | 50 | 安卓手机下可以由该属性来设置picker区域的高度