React Native——ActionSheetIOS

最新推荐文章于 2025-06-05 09:14:32 发布

原创最新推荐文章于 2025-06-05 09:14:32 发布 · 609 阅读

0 ·

CC 4.0 BY-SA版权

React Native 专栏收录该内容

8 篇文章

订阅专栏

本文介绍了如何在React Native中使用ActionSheetIOS组件实现iOS应用的弹出菜单和分享功能。详细解释了showActionSheetWithOptions及showShareActionSheetWithOptions方法的参数配置与回调函数的应用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在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);