React Native——ActionSheetIOS

前端之家收集整理的这篇文章主要介绍了React Native——ActionSheetIOS前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

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

猜你在找的React相关文章