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 (
        <View style={styles.container}>
        <Text
          style={styles.back_text}
          onPress={this.showAlert.bind(this)}
        >
        点击我
        </Text>
        </View>
    )
  }

  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
  }
});

效果图

alert01.jpg

2. 默认确认框的按钮是“ok”，我们可以修改按钮为“我知道了”。

   
   alert02.jpg

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}
  ]
);

效果图

alert03.jpg