React Native学习之ActionSheetIOS API

需求：分享和弹出多项选择操作！在IOS开发中，ActionSheet提供了这样的功能，而React Native同样封装了该功能，那就是ActionSheetIOS

提供了两个静态方法：showActionSheetWithOptions和showShareActionSheetWithOptions

showActionSheetWithOptions

static showActionSheetWithOptions(options, callback)

在iOS设备上显示一个ActionSheet弹出框，其中options参数为一个对象，其属性必须包含以下一项或多项：

• options（字符串数组）：一组按钮的标题（必选）
• cancelButtonIndex（整型）：选项中取消按钮所在的位置（索引）
• destructiveButtonIndex（整型）：红色高亮显示的位置（索引）
• title（字符串）：弹出框顶部的标题
• message（字符串）：弹出框顶部标题下方的信息

showShareActionSheetWithOptions

static showShareActionSheetWithOptions(options, failureCallback, successCallback)

在iOS设备上显示一个分享弹出框，其中options参数为一个对象，其属性必须包含以下一项或多项：

• message（字符串）：要分享的信息
• url（字符串）：要分享的URL地址

注：如果url指向本地文件，或者是一个base64编码的url，则会直接读取并分享相应的文件。你可以用这样的方式来分享图片、视频以及PDF文件等。

范例：

/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 * @flow
 */

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

class RNAPP extends Component {
    render() {
        return (
            <View style={styles.container}>
                <Text style={styles.item} onPress={this.tip} >showActionSheetWithOptions</Text>
                <Text style={styles.item} onPress={this.share} >showShareActionSheetWithOptions</Text>
            </View>
        );
    }

    tip(){
        ActionSheetIOS.showActionSheetWithOptions(
            {
                options: ['拨打电话', '发送邮件', '发送短信', '取消'],
                cancelButtonIndex: 3,
                destructiveButtonIndex: 0,
                title: '操作',
                message: '请选择您的操作',
            },
            function(index) {
                alert(index);
            }
        );
    }

    share() {
        ActionSheetIOS.showShareActionSheetWithOptions(
            {
                message:'React Native App 开发社区',
                url:'http://www.rnapp.cc/'
            },
            function(err) {
                alert(err);
            },
            function(suc) {
                alert(suc);
            }
        );
    }
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        marginTop:20,
    },
    item:{
        marginTop:10,
        marginLeft:5,
        marginRight:5,
        height:30,
        borderWidth:1,
        padding:6,
        borderColor:'#ddd',
    }
});

AppRegistry.registerComponent('RNAPP', () => RNAPP);