美文网首页
RN-ActionSheetIOS

RN-ActionSheetIOS

作者: hliccy | 来源:发表于2017-07-14 19:59 被阅读331次

分享或者弹出更多选项操作, 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'
    },
});

相关文章

  • RN-ActionSheetIOS

    分享或者弹出更多选项操作, ActionSheetIOS ActionSheetIOS提供了两个静态方法, 对应两...

网友评论

      本文标题:RN-ActionSheetIOS

      本文链接:https://www.haomeiwen.com/subject/jvmohxtx.html