react-native-city-select
Table of contents
Install
npm install react-native-city-select@latest --save
Usage
import CitySelect from "react-native-city-select"
const CITY = {
A: [
{
cityId: '279',
cityName: '阿坝',
cityNameEn: 'Aba',
},
{
cityId: '329',
cityName: '安康',
cityNameEn: 'Ankang',
},
],
}
class Example extends Component {
constructor(props) {
super(props)
this.state = {
cityStatus: false,
cityText: '',
cityId: '',
}
this.handleCityCancel = this.handleCityCancel.bind(this)
this.handleCitySelect = this.handleCitySelect.bind(this)
this.handleCityPress = this.handleCityPress.bind(this)
}
handleCityPress() {
this.setState({
cityStatus: true,
})
}
handleCitySelect(cityObj) {
this.setState({
cityStatus: false,
cityText: cityObj.cityName,
cityId: cityObj.cityId,
})
}
handleCityCancel() {
this.setState({
cityStatus: false,
})
}
renderCitySelect() {
if (this.state.cityStatus) {
return (
<CitySelect
cancelCity={this.handleCityCancel}
selectCity={this.handleCitySelect}
cityData={CITY}
/>
)
}
}
render() {
return (
<View>
<TouchableOpacity
onPress={this.handleCityPress}
>
<Text>
click me!
</Text>
</TouchableOpacity>
{this.renderCitySelect()}
</View>
)
}
}
###Notice
Position: Put the CitySelect component at the bottom of the container, avoid hierarchical relation problem.
City data: Get all Chinese cities data, click here
const CITY = {
A: [
{
cityId: '279',
cityName: '阿坝',
cityNameEn: 'Aba',
},
{
cityId: '329',
cityName: '安康',
cityNameEn: 'Ankang',
},
...
],
...
}
Options
Key | Type | Defalut |
---|
cancelCity | function | |
cancelColor | string | '#51a8fb' |
cancelSize | number | 14 |
selectCity | function | |
cityData | object | |
cancelText | string | '取消' |
titleText | string | '选择城市' |
header | boolean | true |
The Response Object