A React Native ActionSheet polyfill for Android written by Javascript, no native code is required.
npm install react-native-actionsheet-api提供Android和iOS平台通用的的showActionSheetWithOptions()API。统一使用ActionSheet。调用时,如果是iOS,调用ActionSheetIOS.showActionSheetWithOptions()。
IOS有ActionSheetIOS.showActionSheetWithOptions(),但是在Android中没有这个方法可以使用,
虽然在Android中使用ActionSheet有人会感觉很别扭,但是有时候确实需要使用(可以把样式改成Android风格的)。
当我们必须要使用ActionSheet,并且希望跟IOS一样,通过API调用来展示,而不是每次通过渲染一个组件来展示,
基本上就是提供Native提供组件,比如react-native-actionsheet-native,但是需要导入Native代码,而我不希望导入,所以开发出这个组件。
> 提示:这个组件并不完美,使用之前,需要先在页面中渲染一次(创建一个实例)
IOS效果:
!IOS
Android效果:
```
npm install react-native-actionsheet-api --save
js
import ActionSheet from 'react-native-actionsheet-api';
`$3
一般选择在使用之前实例化
ActionSheet,但是只需要实例化一次。`js
// 在页面中渲染
class MyPage extends React.component {
// ... render(){
return (
{/ 只需要实例化一次 /}
{/ ... /}
)
}
}
`$3
`js
// 然后在任何地方,都可以使用直接调用这个方法了
// IOS和Android都可以使用下面的代码
ActionSheet.showActionSheetWithOptions({
title: '请选择您最喜欢的水果',
options: ['苹果🍎', '梨🍐', '香蕉🍌', '橘子🍊', '都不喜欢'],
cancelButtonIndex: 4,
//destructiveButtonIndex: 0,
tintColor: 'green',
},
(buttonIndex) => {
this.setState({ clicked: BUTTONS[buttonIndex] });
}
);
``这个项目采用MIT协议 - 详细信息请查看LICENSE。