React Native的ActionSheet实现

96
smartshallot
0.3 2018.11.22 15:03* 字数 311

在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);

参数optionscallbackActionSheetIOS的调用一样.

使用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