RN-ActionSheetIOS

分享或者弹出更多选项操作, ActionSheetIOS

ActionSheetIOS提供了两个静态方法, 对应两种功能

1 操作表

* showActionSheetWithOptions(options, callback) 弹出一个分类菜单
* 方法中第一个参数 options 是一个对象,该对象里各个属性介绍如下:
  options:表示可选项的名称,是一个字符串数组。 
  cancelButtonIndex:表示“取消”按钮的位置,即“取消”按钮在 options 数组中的索引。
  destructiveButtonIndex:表示不能使用的按钮位置,即不能使用的按钮在 options 数组中的索引。

2 分享框

* showShareActionSheetWithOptions(options, failureCallback, successCallback) 作用是分享一个 url
    options:表示分享的 url
    failureCallback:失败的回调函数
    successCallback:成功的回调函数

3 代码效果


/**
 * Created by licc on 2017/7/9.
 */

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

import NavigationBar from './NavigationBar'

export default class ActionSheetExample extends Component {

    render(){
        return(
            <View style={styles.container}>
                <NavigationBar
                    title={'ActionSheetIOS'}
                    statusBar={{backgroundColor:'blue'}}
                />
                <Text style={styles.item} onPress={this.doSheet.bind(this)}>打开操作表</Text>
                <Text style={styles.item} onPress={this.doShare.bind(this)}>打开分享框</Text>
            </View>
        );
    }

    doSheet(){
        ActionSheetIOS.showActionSheetWithOptions({
            options:[
                '拨打电话',
                '发送邮件',
                '发送短信',
                '取消'
            ],
            cancelButtonIndex: 3,
            destructiveButtonIndex: 0
        },
            (index)=>{
            alert('您点击了:' + index);
            }
        );
    }

    doShare(){
        ActionSheetIOS.showShareActionSheetWithOptions({
            url:''
        },
            (error)=>{
                alert(error)
            },
            (e)=>{
                alert(e)
            }
        );
    }
}

const styles = StyleSheet.create({

    container:{
        flex:1
    },

    item:{
        marginTop:10,
        marginLeft:5,
        marginRight:5,
        height:30,
        borderWidth:1,
        padding:6,
        borderColor:'#ddd',
        textAlign:'center'
    },
});

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 174,817评论 25 709
  • 发现 关注 消息 iOS 第三方库、插件、知名博客总结 作者大灰狼的小绵羊哥哥关注 2017.06.26 09:4...
    肇东周阅读 12,305评论 4 61
  • 我走过山时,山不说话, 我路过海时,海不说话, 小毛驴滴滴答答,倚天剑伴我走天涯。 大家都说我因为爱着杨过大侠,才...
    白羊铁蛋阅读 180评论 0 0
  • 当你走进人群, 你会发现, 唯一和你同路的, 只有你自己。
    李放fun阅读 601评论 6 13