React Native的ActionSheet实现

2018-11-22 本文已影响27人爱翻身的咸鱼

在React Native官方组件中，目前只有ActionSheetIOS，而Android下没有实现。我自己在Github提交了一个代码库，实现了在iOS和Android下通用的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的调用一样.

可以全局的改变，在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支持如下属性：