前言
React Native 是一个跨平台的移动应用开发框架，很适合用于快速开发移动应用。虽然 React Native 提供了很多 UI 组件，但是一些常用的组件比如选择城市的组件，却没有提供。本篇文章将介绍如何使用 npm 包 react-native-citys-picker 来解决这个问题。
安装
react-native-citys-picker 是一个 npm 包，安装非常简单。运行以下命令安装这个包：
npm install react-native-citys-picker --save
使用
安装完成后，为了在项目中使用这个包，需要在页面中 import 引用。
import Picker from "react-native-citys-picker";
Props
使用这个组件时可以设置一些属性（Props）来定义城市选择器的行为。
address
在页面中使用这个组件时，需要提供一个地址数组。地址数组应该是根据省份、城市和区分别分组形成的一个二维数组。例如：
-- -------------------- ---- -------
----- ------- - -
------- ------ -------
------- ------ -------
------- ------ -------
------- ------ -------
------- ------ --------
------- ------ -------
------- ------ --------
---
--value
选择城市后返回的值（返回的是一个数组）。
onCancel
取消选择时的回调函数。
onConfirm
确认选择时的回调函数。
示例代码
下面是一个完整的使用 react-native-citys-picker 的例子：
-- -------------------- ---- -------
------ ------ - -------- - ---- --------
------ - ----- ----- ---------------- - ---- ---------------
------ ---------- ---- ----------------------------
----- --- - -- -- -
----- --------- ----------- - ----------------
----- --------- ----------- - ------------- --- -----
----- ----------------- - ------- -- -
------------------
------------------
--
----- ---------------- - -- -- -
------------------
--
------ -
----- ------------- -- --------------- --------- ----------- -----------
-----------------
---------------- --- ---------------- -----------
----------- -- -----------------
-
----- ----------------- --- ------ ----------
- ---------- -- ------- -
-------
-------------------
-----------
-----------------
---------------------------
-----------------------------
-----------------
--
-------
--
--
------ ------- ----在这个例子中，我们创建了一个按钮，点击按钮后弹出城市选择器。选择完城市后，将选择的值保存在 state 中，并将选择器关闭。
结语
本篇文章介绍了如何使用 React Native 中的一个城市选择器 npm 包 react-native-citys-picker。使用这个组件，开发者们可以快速地实现一个城市选择器，并在移动应用中使用。同时，这个组件也可以让开发者们更好地理解 React Native 的组件化开发思想。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60067357890c4f7277583db0