Package Exports

react-native-city-select

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (react-native-city-select) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

react-native-city-select

Install
Usage
Notice
Options
Response object

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

key	Type
cityObj	Object