欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  移动技术

ReactNative Alert详解及实例代码

程序员文章站 2024-03-05 16:48:49
alert顾名思义一就是一个警告框,一般使用情况比如:退出登录,清楚缓存,提示修改密码等等。。。reactnative中的alert只有一个静态方法alert()其中有四个...

alert顾名思义一就是一个警告框,一般使用情况比如:退出登录,清楚缓存,提示修改密码等等。。。reactnative中的alert只有一个静态方法alert()其中有四个参数:标题,信息,按钮和按钮类型 在android按钮至多有三个 下面是使用情况:

ReactNative Alert详解及实例代码

实例代码:

/**
 * 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;

感谢阅读,希望能帮助到大家,谢谢大家对本站的支持!