首页 » React Native » React Native技术文章 » 正文

【React Native开发】React Native API模块之ActionSheetIOS可点击弹框详解-适配iOS开发(45)

尊重版权,未经授权不得转载

本文来自:江清清的技术专栏(http://www.lcode.org)

(一)前言

今天我们继续来看一下ActionSheetIOS模块详解以及实例。

刚创建的React Native技术交流3群(496508742),欢迎各位大牛,React Native技术爱好者加入交流!同时博客右侧欢迎微信扫描关注订阅号,移动技术干货,精彩文章技术推送!

该ActionSheetIOS进行封装渲染了iOS原生平台的ActionSheet模块。iOS中自带从屏幕下方弹框并且可点击的弹框,也就是AciotnSheet

(二)模块方法

1.showActionSheetWithOptions(options:Object,callback:Function)  static静态方法,该进行显示一个具有多项item选择的弹框。可选参数为取消,删除以及若干个可选项。第二个参数为点击选择的回调方法。

2.showShareActionSheetWithOptions(options:Object,failuerCallBack:Function,successCallBack:Function)   static静态方法,该进项显示分享或者更多功能的弹框。后面两个参数为选择分享失败以及成功回调的方法

(三)使用实例

上面我们已经针对ActionSheetIOS模块相关讲解,下面进行一个实例来演示一下该两个方法的具体用法,具体代码如下:

/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 */
'use strict';
import React, {
  AppRegistry,
  Component,
  StyleSheet,
  Text,
  View,
  TouchableHighlight,
  ActionSheetIOS,
} from 'react-native';
var BUTTONS = [
  'ITEM 0',
  'ITEM 1',
  'ITEM 2',
  '删除',
  '取消',
];
var DESTRUCTIVE_INDEX = 3;
var CANCEL_INDEX = 4;

class CustomButton extends React.Component {
  render() {
    return (
      <TouchableHighlight
        style={styles.button}
        underlayColor="#a5a5a5"
        onPress={this.props.onPress}>
        <Text style={styles.buttonText}>{this.props.text}</Text>
      </TouchableHighlight>
    );
  }
}
class ActionSheetDemo extends Component {
  constructor(props){
    super(props);
    this.state={
      clicked: 'none',
    };
    this._showActionSheet = this.showActionSheet.bind(this);
    this._showShareActionSheet = this.showShareActionSheet.bind(this);
  }
  //显示ActionSheet
  showActionSheet() {
    ActionSheetIOS.showActionSheetWithOptions({
      options: BUTTONS,
      cancelButtonIndex: CANCEL_INDEX,
      destructiveButtonIndex: DESTRUCTIVE_INDEX,
      tintColor: 'green',
    },
    (buttonIndex) => {
      this.setState({ clicked: BUTTONS[buttonIndex] });
    });
  }
  //显示ShareActionSheet
  showShareActionSheet() {
    ActionSheetIOS.showShareActionSheetWithOptions({
      url: 'http://www.lcode.org',
      message: '转入江清清的技术专栏',
      subject: '江清清的技术专栏Email主题',
      excludedActivityTypes: [
        'com.apple.UIKit.activity.PostToTwitter'
      ]
    },
    (error) => {
      console.error(error);
    },
    (success, method) => {
      var text;
      if (success) {
        text = `Shared via ${method}`;
      } else {
        text = 'You didn\'t share';
      }
      this.setState({text});
    });
  }
  render() {
    return (
      <View>
        <Text style={styles.welcome}>
           ActionSheetIOS实例
        </Text>
        <CustomButton text="弹出基本Action" 
            onPress={this._showActionSheet}
        />
        <Text style={{margin:10}}>
           基本Action点击选择的项目为: {this.state.clicked}
        </Text>

        <CustomButton text="弹出ShareAction" 
            onPress={this._showShareActionSheet}
        />
      </View>
    );
  }
}
const styles = StyleSheet.create({
  welcome: {
    fontSize: 20,
    textAlign: 'center',
    marginTop: 20,
  },
  button: {
    margin:5,
    backgroundColor: 'white',
    padding: 15,
    borderBottomWidth: StyleSheet.hairlineWidth,
    borderBottomColor: '#cdcdcd',
  },
});

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

运行效果如下:

(四)最后总结

今天我们主要讲解学习了ActionSheetIOS模块详细介绍以及使用实例,大家有问题可以加一下群React Native技术交流3群(496508742).或者底下进行回复一下。

尊重原创,未经授权不得转载:From Sky丶清(http://www.lcode.org/) 侵权必究!

关注我的订阅号(codedev123),每天分享移动开发技术(Android/IOS),项目管理以及博客文章!(欢迎关注,第一时间推送精彩文章)

关注我的微博,可以获得更多精彩内容