0
点赞
收藏
分享

微信扫一扫

【Kevin Learn React Native】--> iOS 独有组件之 ActionSheetIOS

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

方法

  1. 操作表
    ​​​static showActionSheetWithOptions(options, callback)​​ 在 iOS 设备上显示一个 ActionSheet 弹出框,
  • 其中​​options​​参数为一个对象,其属性必须包含以下一项或多项:
    ​options​​ (字符串数组) - 一组按钮的文字(必选)
    ​cancelButtonIndex​​ (整型) - 取消性质的按钮在​​options​​中的位置(索引)
    ​destructiveButtonIndex​​ (整型) - 删除性质的按钮在​​options​​中的位置(索引)
    ​title​​ (字符串) - 弹出框顶部的标题
    ​message​​ (字符串) - 弹出框顶部标题下方的信息
    ​tintColor​​ (字符串) - 指定删除性质的按钮的文字的颜色
  • 'callback’函数则仅接受一个参数,即所点击按钮的索引。
  1. 分享框
    ​​​static showShareActionSheetWithOptions(options, failureCallback, successCallback)​​ 在 iOS 设备上显示一个分享弹出框,
  • 其中​​options​​ 参数为一个对象,其属性包含以下几项(必须至少有 message 或 url):
    ​url​​(字符串) - 要分享的 URL 地址
    ​message​​ (字符串) - 要分享的信息
    ​subject​​ (字符串) - 要分享的信息主题
    ​excludedActivityTypes​​(数组) - 指定在 actionsheet 中不显示的活动
    注:如果url指向本地文件,或者是一个 base64 编码的 url,则会直接读取并分享相应的文件。你可以用这样的方式来分享图片、视频以及 PDF 文件等。
  • 'failureCallback’函数仅接受一个错误对象参数。此对象中仅包含一个可选的stack属性,类型为字符串。
  • 'successCallback’函数接受两个参数:
  • 表示成功与否的布尔值
  • 成功的话返回一个表示分享方式的字符串

实例

1. 逻辑代码

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

export default class App extends Component {
render() {
return (
<View style = {styles.container}>
<Button
style={styles.text}
onPress = {
this.sheet.bind(this)
}
title = {'打开操作表'}
/>
<Button
style={styles.text}
onPress = {
this.share.bind(this)
}
title = {'打开分享框'}
/>
</View>
);
}

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

share() {
ActionSheetIOS.showShareActionSheetWithOptions({
url:'https://www.jianshu.com/u/7ca4b115e1df',
},function(error){
alert(error);
},function(e) {
alert(e);
}
)}

}

const styles = StyleSheet.create({
container: {
flex: 1,
paddingTop: 30,
backgroundColor: '#F5FCFF',
},
text: {
fontSize: 18,
margin: 10,
},
});

2. 效果图
【Kevin Learn React Native】--> iOS 独有组件之 ActionSheetIOS_iOS

【Kevin Learn React Native】--> iOS 独有组件之 ActionSheetIOS_iOS_02

小提示:

在 iOS 模拟器中按下 ⌘-R 就可以刷新 APP 并看到你的最新修改!


举报

相关推荐

0 条评论