React Native - 操作表、分享框组件（ActionSheetIOS）的使用详解

作者：hangge | 2017-03-21 08:10

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

React / React Native