React Native的ActionSheet实现

在React Native官方组件中，目前只有ActionSheetIOS，而Android下没有实现。我自己在Github提交了一个代码库，实现了在iOS和Android下通用的ActionSheet。

Github地址：https://github.com/gaoxiaosong/react-native-general-actionsheet

这个库实现了一个自定义容器，用来根据配置项展示ActionSheet。在iOS下，可以选择是使用ActionSheetIOS还是使用自定义容器，在Android下，只能使用自定义容器。

目前只支持ActionSheet.showActionSheetWithOptions的调用。

截屏

横屏图片和iOS自定义容器的图片请参见Github仓库。

Android-2-P.jpeg

安装

采用如下两种方式之一即可：

npm install --save react-native-general-actionsheet
yarn add react-native-general-actionsheet

使用

在文件中进行如下调用即可：

import ActionSheet from 'react-native-general-actionsheet';

ActionSheet.showActionSheetWithOptions(options, callback);

参数options和callback和ActionSheetIOS的调用一样.

使用ActionSheetIOS

可以全局的改变，在iOS系统中是否使用ActionSheetIOS:

import ActionSheet from 'react-native-general-actionsheet';

ActionSheet.useActionSheetIOS = true/false;

自定义样式

用户可以全局的改变容器的样式设置。

import ActionSheet from 'react-native-general-actionsheet';

ActionSheet.Container.defaultProps.xxx = yyy;

其中xxx支持如下属性：

名称	类型	描述
backgroundColor	string	整个视图的背景色
contentBackgroundColor	string	内容区的背景色
separatorColor	string	分隔线的颜色
fontSize	number	按钮文本的字号
color	string	按钮文本的颜色
titleStyle	object	顶部标题的样式
messageStyle	object	顶部消息的样式
destructiveButtonStyle	object	辅助按钮的样式
cancelButtonStyle	object	取消按钮的样式
touchableUnderlayColor	string	按钮点击操作的Underlay颜色
supportedOrientations	array	iOS支持的设备方向

其他文章

• React Native中自定义导航条
• React Native多功能选择页面
• React Native拍照、从相册选择、录像的实现
• React Native中事件监听和持久化存储的结构化设计