React Native-15.React Native 常用API及实践 AlertIOS AlertSheetIOS

前端之家收集整理的这篇文章主要介绍了React Native-15.React Native 常用API及实践 AlertIOS AlertSheetIOS前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
@H_301_0@

动起来,我们来看个效果

AlertIOS简介

完全理解成iOS中的UIAlert,
有两个方法

  • alert(title,message,buttons) : 普通对话框,其中buttons是对象数组。
  • prompt(title,value,buttons) : 提供输入的对话框,其中buttons是对象数组。

AlertSheetIOS简介

完全理解成UIActionSheet.但是它还可以换出系统自带分享面板。
有两个方法

  • showActionSheetWithOptions(options,callback) : 用于弹出分类菜单
  • showShareActionSheetWithOptions(options,failureCallback,successCallback) : 分享弹出框。

我们来封装一个组件 alert.js

var React = require('react-native');
var {
    AppRegistry,StyleSheet,View,AlertIOS,Text,TouchableOpacity,ActionSheetIOS
} = React;

var Alert = React.createClass({
    render: function(){
        return(
            <View style= {[styles.flex,{marginTop: 74}]}>
                <TouchableOpacity  style = {[styles.item]} onPress = {this.tip} >
                    <Text style = {styles.text_st}>
                        普通的提示框
                    </Text>
                </TouchableOpacity>
                <TouchableOpacity  style = {[styles.item]} onPress = {this.input} >

                    <Text style = {styles.text_st}>
                        输入提示框
                    </Text>
                </TouchableOpacity>
                <TouchableOpacity  style = {[styles.item]} onPress = {this.sheetShow} >
                    <Text style = {styles.text_st}>
                        提示列表菜单
                    </Text>
                </TouchableOpacity>
                <TouchableOpacity  style = {[styles.item]} onPress = {this.shareShow} >
                    <Text style = {styles.text_st}>
                        分享弹出框
                    </Text>
                </TouchableOpacity>
            </View>
        );
    },tip: function(){
        AlertIOS.alert('提示','普通提示框',[
            {
                text: '取消',onPress:function(){
                    alert('取消');
                }
            },{
                text: '确定',onPress:function(){
                    alert('确定');
                }
            }

        ]);
    },input:function(){
        AlertIOS.prompt('提示','输入提示框',onPress: function(){
                    alert('取消')
                }
            },onPress:function(e) {
                    alert(e);
                }
            }
        ]);
    },sheetShow: function(){
        ActionSheetIOS.showActionSheetWithOptions({
            options: [
                '拨打电话','发送邮件','发送短信','取消'
            ],cancelButtonIndex : 3,destructiveButtonIndex: 0
        },function(index){
            if (index == 0) {
                alert('拨打电话')
            } else if (index == 1){
                alert('发送邮件')
            } else if (index == 2) {
                alert('发送短信')
            } else if ('3') {
                alert('取消')
            }
        });
    },shareShow: function(){
        ActionSheetIOS.showShareActionSheetWithOptions({
            url: 'http://blog.csdn.net/wxs0124'
        },function(err){
            alert(err)
        },function(e){
            alert(e)
        });
    }

});
var styles = StyleSheet.create({
    flex: {
        flex: 1
    },item : {
        marginLeft: 5,marginRight:5,marginTop: 10,borderWidth: 1,borderColor: '#ddd',borderRadius: 3,justifyContent: 'center',height: 30,},text_st : {
        fontSize: 15,color: '#222',alignSelf:'center',}

})

module.exports = Alert;

在index.ios.js 中这样:

'use strict';
var React = require('react-native');
var Alert = require('./iOSFile/alert.js');
var {
  AppRegistry,NavigatorIOS,} = React;

var styles = StyleSheet.create({
    container : {
        flex: 1
    },});

var wxsPrj = React.createClass({
  render: function() {
    return (
        <NavigatorIOS style = {styles.container} initialRoute = { { component:Alert,title:'样式列表',} }/> ); } }); AppRegistry.registerComponent('wxsPrj',() => wxsPrj);

猜你在找的React相关文章