React Native - 操作表、分享框组件(ActionSheetIOS)的使用详解
在 App 中常会需要进行分享或者弹出多项选择的操作。在 iOS 开发中,ActionSheet 组件提供了这样的功能。而 React Native 同样对其做了封装,那就是 ActionSheetIOS。
一、ActionSheetIOS介绍
ActionSheetIOS 提供了两个静态方法,分别对应两种功能。
1,操作表
(1)作用是弹出一个分类菜单,对应的方法是:showActionSheetWithOptions(options, callback)
(2)方法中第一个参数 options 是一个对象,该对象里各个属性介绍如下:
- options:表示可选项的名称,是一个字符串数组。
- cancelButtonIndex:表示“取消”按钮的位置,即“取消”按钮在 options 数组中的索引。
- destructiveButtonIndex:表示不能使用的按钮位置,即不能使用的按钮在 options 数组中的索引。
2,分享框
(1)作用是分享一个 url,对应的方法是:showShareActionSheetWithOptions(options, failureCallback, successCallback)
(2)方法中的三个参数:
- options:表示分享的 url
- failureCallback:失败的回调函数
- successCallback:成功的回调函数
二、使用样例
1,效果图
我们点击“打开操作表”和“打开分享框”按钮后,会弹出对应的窗口进行操作。
2,样例代码
import React, { Component } from 'react'; import { AppRegistry, StyleSheet, Text, View, ActionSheetIOS } from 'react-native'; //默认应用的容器组件 class App extends Component { render() { return ( <View style={styles.container}> <Text style={styles.item} onPress={this.sheet.bind(this)}>打开操作表</Text> <Text style={styles.item} onPress={this.share.bind(this)}>打开分享框</Text> </View> ); } //弹出操作表 sheet() { ActionSheetIOS.showActionSheetWithOptions({ options: [ '拨打电话', '发送邮件', '发送短信', '取消' ], cancelButtonIndex: 3, destructiveButtonIndex: 0 },function(index){ alert('您刚才点击的按钮索引是:' + index); }) } //弹出分享框 share() { ActionSheetIOS.showShareActionSheetWithOptions({ url: 'http://www.hangge.com', },function(error){ alert(error) },function(e){ alert(e); }) } } //样式定义 const styles = StyleSheet.create({ container:{ flex: 1, marginTop:25 }, item:{ marginTop:10, marginLeft:5, marginRight:5, height:30, borderWidth:1, padding:6, borderColor:'#ddd', textAlign:'center' }, }); AppRegistry.registerComponent('HelloWorld', () => App);