React Native——ActionSheetIOS

发布时间：2020-12-15 07:31:08 所属栏目：百科来源：网络整理

导读：在App开发中我们也会遇到这样的需求，那就是分享和弹出多项选择操作。在iOS开发中，ActionSheet提供了这样的功能。而React Native同样封装了该功能，那就是ActionSheetIOS. ActionSheetIOS提供了两个静态方法 1、用于弹出分类菜单 showActionSheetWithOption

在App开发中我们也会遇到这样的需求，那就是分享和弹出多项选择操作。在iOS开发中，ActionSheet提供了这样的功能。而React Native同样封装了该功能，那就是ActionSheetIOS.

ActionSheetIOS提供了两个静态方法

1、用于弹出分类菜单

showActionSheetWithOptions(options: Object,callback: Function)

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

options（字符串数组） - 一组按钮的标题（必选）
cancelButtonIndex（整型） - 选项中取消按钮所在的位置（索引）
destructiveButtonIndex（整型） - 选项中删除按钮所在的位置（索引）
title（字符串） - 弹出框顶部的标题
message（字符串） - 弹出框顶部标题下方的信息

2、分享弹出窗。

static showShareActionSheetWithOptions(options: Object,failureCallback: Function,successCallback: Function)

在iOS设备上显示一个分享弹出框，其中options参数为一个对象，其属性包含以下几项（必须至少有message或url）：

message（字符串） - 要分享的信息
url（字符串） - 要分享的URL地址
subject（字符串） - 要分享的信息主题
excludedActivityTypes（数组） - 指定在actionsheet中不显示的活动

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

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

var kwgkwg=React.createClass({
  render() {
    return (
      <View style={styles.container}>


        <Text onPress={this.tip()}>showActionSheetWithOptions</Text>

        </View>
    );
  },tip(){

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

  },});

const styles = StyleSheet.create({
  container: {
    flex: 1,justifyContent: 'center',alignItems: 'center',backgroundColor: '#F5FCFF',});

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

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!