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

【React Native开发】React Native API模块之AlertIOS弹框详解-适配iOS开发(36)

尊重版权,转载请注明出处

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

(一)前言

今天我们继续来看一下AlertIOS(仅支持iOS设备)弹出框详解以及实例使用。

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

该AlertIOS模块仅只支持iOS平台,有关平台通用支持的模块Alert的详解请点击进入 。该AlertIOS模块提供了两个方法,分别为:alert和promt。AlertIOS.alert中可提供的方法已经全部在平台通用模块Alert.alert中实现了,如果你不需要IOS的特殊功能,那么我们推荐你使用Alert.alert模块方法。当用户进行输入的时候弹出来的提示框那么对于此类特殊的可以采用AlertIOS.promt来实现。

(二)方法

1.alert(title:string,message?:string,callbackOrButtons?:?(()=>void)|ButtonsArray,type?:AlertType)  static静态方法,该用来弹出一个对话框。传入的相关参数如下:

title: string  -对话框的标题

message:string -该为可选的参数,用于在输入框组件上面显示提示信息

callbackOrButtons -该为可选的参数,可以为但参数的方法或者传入一组按钮。如果传入的是一个方法,那么当用户点击'OK'的时候会回调该方法。如果你传入是一组按钮的配置,那么没有一个按钮可应该包括一个text属性,同样也可以加入一些可选的参数例如onPress和style属性,styles的值应该为'default','cancel'或者'destructive'中的一个。

type  --deprecated,该类型已经废弃了,不需要使用了。

下面看一个官方调用该方法的实例:

AlertIOS.alert(
 'Sync Complete',
 'All your data are belong to us.'
);

2.prompt(title:string,message?:string,callbackOrButtons?:?((text:string)=>void)|ButtonsArray,type?:AlertType,defaultValue?:string)   static静态方法,该用来尽心提示用户输入一些信息:

前面三个参数分别为:title,message,callbackOrButtons分别和上面一个方法中的三个参数意义一样,第四个参数type:string-进行设置输入框的类型配置可选值有'plain-text','secure-text','password',第五个参数为defaultValue:string  该为需要输入信息的默认值(textfield)

我们来看一下官方写的创建实例代码:创建自定义按钮的弹框

AlertIOS.prompt(
  'Enter password',
  'Enter your password to claim your $1.5B in lottery winnings',
  [
    {text: 'Cancel', onPress: () => console.log('Cancel Pressed'), style: 'cancel'},
    {text: 'OK', onPress: password => console.log('OK Pressed, password: ' + password)},
  ],
  'secure-text'
);

创建一个自定义的回调方法和默认的按钮代码:

AlertIOS.prompt(
  'Update username',
  null,
  text => console.log("Your username is "+text),
  null,
  'default'
)

(三)使用实例

上面我们针对于AlertIOS模块做了介绍详解,下面针对以上的一些方法进行实例演示,具体代码如下:

/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 */
'use strict';
import React, {
  AppRegistry,
  Component,
  StyleSheet,
  Text,
  View,
  AlertIOS,
  TouchableHighlight,
} from 'react-native';
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 AlertIOSDemo extends Component {
  render() {
    return (
      <View style={{backgroundColor:'#b9b9b9',flex:1}}>
        <View style={{marginTop:20,height:45,backgroundColor:'#a5b5c5',justifyContent:'center'}}>
          <Text style={styles.welcome}>
           AlertIOS使用实例
          </Text></View>
        <Text style={{color:'white',height:20,marginTop:5,marginLeft:5}}>Alert方法实例:</Text>
        <CustomButton text='弹出一个带有标题和信息默认弹出框' onPress={()=>AlertIOS.alert('标题','我是提醒Message')}/>
        <CustomButton text='弹出两个按钮的弹出框' onPress={()=>AlertIOS.alert('标题','我是提醒Message',[
           {text:'取消',onPress:()=>console.log('点击了取消'),style:'cancel'},
           {text:'确定',onPress:()=>console.log('点击了确定'),style:'default'}
          ])}/>
        <Text style={{color:'white',height:20,marginTop:10,marginLeft:5}}>Prompt方法实例:</Text>
        <CustomButton text='弹出默认提醒框' onPress={()=>AlertIOS.prompt('温馨提醒','请输入相关信息')}/>
        <CustomButton text='弹出两个按钮的弹出框-密码输入框' onPress={()=>AlertIOS.prompt('温馨提醒','请输入密码',[
           {text:'取消',onPress:()=>console.log('点击了取消'),style:'cancel'},
           {text:'确定',onPress:()=>console.log('点击了确定'),style:'default'}
          ],'secure-text')}/>
        <CustomButton text='弹出两个按钮的弹出框-输入框存在默认信息' onPress={()=>AlertIOS.prompt('温馨提醒','请输入相关信息',[
           {text:'取消',onPress:()=>console.log('点击了取消'),style:'cancel'},
           {text:'确定',onPress:()=>console.log('点击了确定'),style:'default'}
          ],'plain-text','我是默认信息')}/>
      </View>
    );
  }
}
const styles = StyleSheet.create({
  welcome: {
    fontSize: 14,
    textAlign: 'left',
    margin: 20,
    color:'#fff',
    alignSelf:'center'
  },
  button: {
    margin:5,
    backgroundColor: 'white',
    padding: 15,
    borderBottomWidth: StyleSheet.hairlineWidth,
    borderBottomColor: '#cdcdcd',
  }
});

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

运行结果截图如下:

开发工具XCode打印的日志信息如下:

(四)最后总结

今天我们主要讲解学习了AlertIOS基本相关介绍和使用详解,大家有问题可以加一下群React Native技术交流2群(496601483).或者底下进行回复一下。

尊重原创,转载请注明:From Sky丶清(http://www.lcode.org/) 侵权必究!

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

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