React Native 其他组件之 Alert

启动一个提示对话框,包含对应的标题和信息。
Alert API 虽然只有一个普通的消息提示对话框类型,但它是 iOS 设备和 Android 设备都通用的。

弹出确认框

简单示例

import React, { Component } from 'react';
import {
  StyleSheet,
  Alert,
  View,
  Text
} from 'react-native';

export default class App extends Component { 
  render() {
    return (
		
        
        点击我
        
		
    )
  }

  showAlert() { 
    Alert.alert('温馨提示', '正文内容');
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  },
  back_text: {
    width: 80,
    backgroundColor: 'blue',
    color: 'white',
    textAlign: 'center',
    fontSize: 18,
    alignSelf: 'center',
    marginTop:20
  }
});

效果图
React Native 其他组件之 Alert_第1张图片

  1. 默认确认框的按钮是“ok”,我们可以修改按钮为“我知道了”。
    React Native 其他组件之 Alert_第2张图片

Alert.alert('标题内容','正文内容',[{text:"我知道了"}]);
3. 除了提供按钮名称,还可以指定回调函数。下面代码,当用户点击了“我知道了”按钮后,confirm 函数会被执行。

Alert.alert('标题内容','正文内容',
  [{text:"我知道了", onPress:this.confirm}]
);

弹出选择框

示例代码

Alert.alert('标题内容','正文内容',
  [
    {text:"选项一", onPress:this.opntion1Selected},
    {text:"选项二", onPress:this.opntion2Selected},
    {text:"选项三", onPress:this.opntion3Selected}
  ]
);

效果图
React Native 其他组件之 Alert_第3张图片

你可能感兴趣的:(React,Native)