在前端开发中，可能需要使用到弹框组件，例如消息提示、确认框、选择框等等。在 React Native 开发中，我们可以使用 npm 包 react-native-action-sheet-native 来实现弹框功能。该包实现了原生的风格并支持多种选项配置，下面将介绍该包的使用教程。
安装
安装该包十分简单，只需在终端输入以下命令：
npm install react-native-action-sheet-native
导入
使用该包需要先导入：
import ActionSheet from 'react-native-action-sheet-native';
基本使用
使用 ActionSheet.showActionSheetWithOptions 方法可以弹出选择框，例如：
-- -------------------- ---- -------
---------------------------------------
-
-------- ------- ------ ------ ------
------------------ --
----------------------- --
------ --------
-------- --------
--
----------- -- -
---------------------- -------------
--
--其中 options 属性设置选择框中的选项列表，cancelButtonIndex 属性设置取消选项的索引，destructiveButtonIndex 属性设置危险选项的索引，title 属性设置选择框的标题，message 属性设置选择框的消息。
选择后会调用回调函数，并传入用户选择的选项索引。
高级使用
该包还支持更多高级选项，例如样式定制、选择框位置、动画等等。下面将介绍一些常用配置。
样式定制
可以使用 styles 属性来定制选择框、选项等的样式。
-- -------------------- ---- -------
---------------------------------------
-
-- ---
------- -
--------- -
---------------- ----------
------------- ---
-------- ---
--
----------- -
---------------- ----------
-------- ---
--
---------- -
---------------- ----------
--
----------- -
------ -------
--
---------------- -
---------- ---
---------------- ----------
------------- ---
--
----------------- -
------ -------
--
--------------------- -
---------------- ----------
------------- ---
--
---------------------- -
------ -------
--
--
--
-- ---
--其中，titleBox 和 messageBox 分别表示选择框的标题和消息框的样式，optionBox 和 optionText 分别表示选项框和选项文字的样式，cancelButtonBox 和 cancelButtonText 分别表示取消按钮的样式和文字样式，destructiveButtonBox 和 destructiveButtonText 分别表示危险按钮的样式和文字样式。
选择框位置
可以使用 anchor 属性来设置选择框的位置。
-- -------------------- ---- -------
---------------------------------------
-
-- ---
------- -
-- --
-- --
------ ----
------- ----
--
--
-- ---
--其中，x 和 y 分别表示选择框距离屏幕左上角的偏移量，width 和 height 分别表示选择框的宽度和高度。
动画效果
可以使用 animated 属性来设置选择框的动画效果。
-- -------------------- ---- -------
---------------------------------------
-
-- ---
--------- -----
-------------- ---------
---------- ----- -------- ------- ---- ---------------- --------- -- ---
--
-- ---
--其中，animated 属性表示是否使用动画效果，animationType 属性表示动画类型，有 spring 和 fade 两种可选，extraView 属性表示选择框下方的额外视图。
示例代码
下面是一个完整的示例代码：
-- -------------------- ---- -------
------ ----- ---- --------
------ - ----- ------ - ---- ---------------
------ ----------- ---- -----------------------------------
----- ------ - -
---------- -
----- --
----------- ---------
--------------- ---------
--
--
------ ------- -------- ----- -
----- ----------- - -- -- -
---------------------------------------
-
-------- ------- ------ ------ ------
------------------ --
----------------------- --
------ --------
-------- --------
------- -
--------- -
---------------- ----------
------------- ---
-------- ---
--
----------- -
---------------- ----------
-------- ---
--
---------- -
---------------- ----------
--
----------- -
------ -------
--
---------------- -
---------- ---
---------------- ----------
------------- ---
--
----------------- -
------ -------
--
--------------------- -
---------------- ----------
------------- ---
--
---------------------- -
------ -------
--
--
------- -
-- --
-- --
------ ----
------- ----
--
--------- -----
-------------- ---------
---------- ----- -------- ------- ---- ---------------- --------- -- ---
--
----------- -- -
---------------------- -------------
--
--
--
------ -
----- -------------------------
------- ------------- --------------------- --
-------
--
-总结
通过本文的介绍，我们学习了如何使用 npm 包 react-native-action-sheet-native 来实现弹框功能，并且了解了高级配置的方法。使用该包可以充分发挥 React Native 的优势，提升应用的用户体验。
Source: FunTeaLearn,Please indicate the source for reprints https://funteas.com/post/6005662281e8991b448e1fc5