在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支持的设备方向 |
网友评论