react-native-actionsheet
Cross platform ActionSheet. This component implements a custom ActionSheet and provides the same way to drawing it on the defferent platforms(iOS and Android). Actually, In order to keep the best effect, it still uses the ActionSheetIOS on iOS.
Installation
npm i react-native-actionsheet --save
Demo
/** * Sample React Native App * https://github.com/facebook/react-native */'use strict'; ; ; const buttons = '取消' '确认退出' '😄😄😄' '哈哈哈';const CANCEL_INDEX = 0;const DESTRUCTIVE_INDEX = 1; { } { thisActionSheet; } { return <View style=flex: 1 alignItems: 'center' justifyContent: 'center'> <Text style=stylesbutton onPress=thisshow>SHOW</Text> <ActionSheet ref= thisActionSheet = o title="确认要退出登录吗?" options=buttons cancelButtonIndex=CANCEL_INDEX destructiveButtonIndex=DESTRUCTIVE_INDEX onPress=this_handlePress /> </View> ; } const styles = StyleSheet; AppRegistry;
直接使用自定义的ActionSheet,统一双平台的样式
;
Props
Prop name | Desciption | Type | Default |
---|---|---|---|
title | string | ||
options | string | ||
tintColor | string | ||
cancelButtonIndex | string | ||
destructiveButtonIndex | string | ||
onPress | function | (index) => {} |