当前位置: > > > React Native - 操作表、分享框组件(ActionSheetIOS)的使用详解

React Native - 操作表、分享框组件(ActionSheetIOS)的使用详解

App 中常会需要进行分享或者弹出多项选择的操作。在 iOS 开发中,ActionSheet 组件提供了这样的功能。而 React Native 同样对其做了封装,那就是 ActionSheetIOS

一、ActionSheetIOS介绍

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


1,操作表

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


2,分享框

(1)作用是分享一个 url,对应的方法是:showShareActionSheetWithOptions(options, failureCallback, successCallback)
(2)方法中的三个参数:
  • options:表示分享的 url
  • failureCallback:失败的回调函数
  • successCallback:成功的回调函数

二、使用样例

1,效果图

我们点击“打开操作表”和“打开分享框”按钮后,会弹出对应的窗口进行操作。
         

2,样例代码

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

//默认应用的容器组件
class App extends Component {
   render() {
      return (
        <View style={styles.container}>
         <Text style={styles.item} onPress={this.sheet.bind(this)}>打开操作表</Text>
         <Text style={styles.item} onPress={this.share.bind(this)}>打开分享框</Text>
        </View>
      );
   }

   //弹出操作表
   sheet() {
     ActionSheetIOS.showActionSheetWithOptions({
       options: [
         '拨打电话',
         '发送邮件',
         '发送短信',
         '取消'
       ],
       cancelButtonIndex: 3,
       destructiveButtonIndex: 0
     },function(index){
       alert('您刚才点击的按钮索引是:' + index);
     })
   }

   //弹出分享框
   share() {
     ActionSheetIOS.showShareActionSheetWithOptions({
       url: 'http://www.hangge.com',
     },function(error){
       alert(error)
     },function(e){
       alert(e);
     })
   }
 }

//样式定义
const styles = StyleSheet.create({
  container:{
    flex: 1,
    marginTop:25
  },
  item:{
    marginTop:10,
    marginLeft:5,
    marginRight:5,
    height:30,
    borderWidth:1,
    padding:6,
    borderColor:'#ddd',
    textAlign:'center'
  },
});

AppRegistry.registerComponent('HelloWorld', () => App);
评论0