React Native iOS 独有组件之 ActionShe

在 App 中常会需要进行分享或者弹出多项选择的操作。在 iOS 开发中，ActionSheet 组件提供了这样的功能。而 React Native 同样对其做了封装，那就是 ActionSheetIOS。

方法

1. 操作表
   static showActionSheetWithOptions(options, callback)
   在 iOS 设备上显示一个 ActionSheet 弹出框，

• 其中options参数为一个对象，其属性必须包含以下一项或多项：
  options （字符串数组） - 一组按钮的文字（必选）
  cancelButtonIndex （整型） - 取消性质的按钮在options中的位置（索引）
  destructiveButtonIndex （整型） - 删除性质的按钮在options中的位置（索引）
  title （字符串） - 弹出框顶部的标题
  message （字符串） - 弹出框顶部标题下方的信息
  tintColor (字符串) - 指定删除性质的按钮的文字的颜色

• 'callback'函数则仅接受一个参数，即所点击按钮的索引。

2. 分享框
   static showShareActionSheetWithOptions(options, failureCallback, successCallback)
   在 iOS 设备上显示一个分享弹出框，

• 其中 options 参数为一个对象，其属性包含以下几项（必须至少有 message 或 url）:
  url（字符串） - 要分享的 URL 地址
  message （字符串） - 要分享的信息
  subject （字符串） - 要分享的信息主题
  excludedActivityTypes（数组） - 指定在 actionsheet 中不显示的活动
  注：如果url指向本地文件，或者是一个 base64 编码的 url，则会直接读取并分享相应的文件。你可以用这样的方式来分享图片、视频以及 PDF 文件等。

• 'failureCallback'函数仅接受一个错误对象参数。此对象中仅包含一个可选的stack属性，类型为字符串。

• 'successCallback'函数接受两个参数：

  • 表示成功与否的布尔值
  • 成功的话返回一个表示分享方式的字符串

实例

1. 逻辑代码

import React, {Component} from 'react';
import {
  StyleSheet, 
  Button, 
  ActionSheetIOS,
  View
} from 'react-native';

export default class App extends Component {
  render() {
    return (
      <View style = {styles.container}>
        <Button 
          style={styles.text} 
          onPress = {
            this.sheet.bind(this)
          }
          title = {'打开操作表'}
        />
        <Button 
          style={styles.text}
          onPress = {
            this.share.bind(this)
          }
          title = {'打开分享框'}
        />
      </View>
    );
  }

  sheet() {
    ActionSheetIOS.showActionSheetWithOptions({
      options: [
        '拨打电话',
        '发送邮件',
        '发送短信',
        '取消',
      ],
      cancelButtonIndex:3,
      destructiveButtonIndex:0
    },function(index) {
      alert('您点击的索引是：' + index);
    })
  }

  share() {
    ActionSheetIOS.showShareActionSheetWithOptions({
      url:'https://www.jianshu.com/u/7ca4b115e1df',
    },function(error){
      alert(error);
    },function(e) {
      alert(e);
    }
    )}

}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    paddingTop: 30,
    backgroundColor: '#F5FCFF',
  },
  text: {
    fontSize: 18,
    margin: 10,
  },
});

2. 效果图

share.jpg sheet.jpg

小提示：

在 iOS 模拟器中按下 ⌘-R 就可以刷新 APP 并看到你的最新修改！