源码网商城,靠谱的源码在线交易网站 我的订单 购物车 帮助

源码网商城

ReactNative Alert详解及实例代码

  • 时间:2020-10-30 10:02 编辑: 来源: 阅读:
  • 扫一扫,手机访问
摘要:ReactNative Alert详解及实例代码
[b]Alert顾名思义一就是一个警告框,一般使用情况比如:退出登录,清楚缓存,提示修改密码等等。。。[/b]ReactNative中的Alert只有一个静态方法alert()其中有四个参数:标题,信息,按钮和按钮类型 在Android按钮至多有三个 下面是使用情况: [img]http://files.jb51.net/file_images/article/201610/2016108110230113.gif?20169811247[/img] [b]实例代码:[/b]
/**
 * Created by Administrator on 2016/9/12.
 */
import React, {Component} from 'react';
import {
  StyleSheet,
  View,
  Text,
  Alert,
} from 'react-native';

class AlertG extends Component {
  render() {
    return (

      <View style={{flex: 1}}>
        <Text
          style={styles.text}
          onPress={()=> this.showOneAlert()}>One</Text>
        <Text
          style={styles.text}
          onPress={()=> this.showTwoAlert()}>Two</Text>
        <Text
          style={styles.text}
          onPress={()=> this.showThreeAlert()}>Three</Text>
      </View>

    )
  }


  showOneAlert() {
    Alert.alert(
      'Alert 标题',
      '只有一个按钮',
      [
        /**
         * 注意参数名字一定不能错
         */
        {text: '确定', onPress: ()=> console.log('点击确定')}
      ]);
  }

  showTwoAlert() {
    Alert.alert(
      'Alert 标题',
      '两个按钮',
      [
        {text: '确定', onPress: ()=> console.log('点击确定')},
        {text: '取消', onPress: ()=> console.log('点击取消')}
      ]
    );
  }

  showThreeAlert() {
    Alert.alert(
      'Alert 标题',
      '三个按钮',
      [
        //第一个和第二个按钮的位置会颠倒
        {text: '取消', onPress: ()=> console.log('点击取消')},
        {text: '确定', onPress: ()=> console.log('点击确定')},
        {text: '稍后', onPress: ()=> console.log('点击稍后')},
      ]
    );
  }
}

const styles = StyleSheet.create({
  text: {
    fontSize: 28
  }
})

module.exports = AlertG;

感谢阅读,希望能帮助到大家,谢谢大家对本站的支持!
  • 全部评论(0)
联系客服
客服电话:
400-000-3129
微信版

扫一扫进微信版
返回顶部