前言
react-native-action-sheet-module 是一个用于 React Native 项目的 action sheet 模块。本教程旨在向大家介绍如何使用这个 npm 包，涉及到的详细步骤以及示例代码。
步骤
- 安装依赖
在命令行工具里进入项目目录，运行命令：
npm install react-native-action-sheet-module --save
- 创建 ActionSheet
创建一个名为 ActionSheetExample.js 的文件，将下面的代码复制进去：
-- -------------------- ---- -------
------ ------ ---------- ---- --------
------ ------ ------- ----------- ---- ---------------
------ ----------- ---- -----------------------------------
----- ------------------ - -- -- -
----- ---------- ------------ - -------------
----- ------- - -
------- ---
------- ---
------- ---
------- ---
---------
--
----- --------------- - -- -- -
---------------------------------------
-
--------
------------------ --
--
----------- -- -
-------------------------
--
--
--
------ -
----- -------------------------
------- ----------- ------ ------ ------------------------- --
--------- --- -- -- -
----- ---------------------------------
----- ------------------------------------- --------------------------
-------
--
-------
--
--
----- ------ - -------------------
---------- -
----- --
--------------- ---------
----------- ---------
--
------------------ -
---------- ---
--
------------- -
--------- ---
----------- -------
--
---
------ ------- -------------------这个例子中有一个按钮，按下这个按钮会打开系统的 action sheet，展示给用户一系列选项。用户选择一个选项后，会在屏幕上显示出来。
- 运行代码
在命令行工具里跑下面的命令来运行应用：
react-native run-ios
或者
react-native run-android
应用会被构建并且在模拟器或者实际设备上运行起来。
- 了解代码
这份代码的核心是 react-native-action-sheet-module 包的使用。在 ActionSheetExample.js 的文件中，ActionSheet 被引用了进来。在 showActionSheet 函数中，我们使用 ActionSheet.showActionSheetWithOptions 来展示 action sheet 给用户，并根据用户选择的选项更新应用中的选中状态。
总结
通过上述步骤，我们已经成功的使用了 npm 包 react-native-action-sheet-module 编写了一个 action sheet 组件。相信大家在以后的 React Native 项目开发中受益匪浅。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60055eb781e8991b448dc690