react-native-city-select

Table of contents

• Install
• Usage
• Notice
• Options
• Response object

Install

npm install react-native-city-select@latest --save

Usage

import React, { Component } from 'react';
import { StyleSheet, Text, View,TouchableOpacity } from 'react-native';
import CitySelect from 'react-native-city-select'
import CITY from './cityData.js'

export default class App extends Component {
  constructor(props) {
    super(props)
    this.state = {
      isVisable: false,
      cityText: '',
      cityId: '',
    }
  }

  handleChangeCityStatus=()=>{
    this.setState({
      isVisable: !this.state.isVisable,
    })
  }

  handleCitySelect=(cityObj)=> {
    this.setState({
      isVisable: false,
      cityText: cityObj.cityName,
      cityId: cityObj.cityId,
    })
  }

  render() {
    return (
      <View style={styles.container}>
        <TouchableOpacity
          onPress={this.handleChangeCityStatus}
        >
          <Text>
            click me!
          </Text>
        </TouchableOpacity>
        <Text>
          {this.state.cityText}{this.state.cityId}
        </Text>
        <CitySelect
          isVisable={this.state.isVisable}
          cancelCity={this.handleChangeCityStatus}
          selectCity={this.handleCitySelect}
          cityData={CITY}
          selectedId={this.state.cityId}
          cityGrid={2}
        />
      </View>
    )
  }
}

const styles = StyleSheet.create({
  container: {
    flex:1,
    justifyContent:'center',
    alignItems:'center'
  },
});

Notice

Position: Put the CitySelect component at the bottom of the container, to avoid hierarchical relation problem.

City data: Get the data of Chinese cities, click here

  const CITY = {
    A: [
      {
        cityId: '279',
        cityName: '阿坝',
        cityNameEn: 'Aba',
      },
      {
        cityId: '329',
        cityName: '安康',
        cityNameEn: 'Ankang',
      },
      ...
    ],
    ...
  }

Options

Key	Type	Defalut
cancelCity	function	null
cancelColor	string	'#51a8fb'
cancelSize	number	14
selectedBg	string	'#26A1FD'
selectedId	string	''
selectCity	function	null
cityData	object	null
cancelText	string	'取消'
titleText	string	'选择城市'
hasHeader	boolean	true
cityGrid	number	1

The Response Object

key	Type
cityObj	Object