在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仓库。
安装
采用如下两种方式之一即可:
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支持的设备方向 |