React Native组件学习 Alert(ES6)

不管iOS或安卓提示对话框还是很简单的，这个组件的使用很简单，小萌就简单的说一说

• iOS和安卓中提示对话框用的还是很多的，启动一个提示对话框，包含对应的标题和信息。

• 你还可以指定一系列的按钮，点击对应的按钮会调用对应的onPress回调并且关闭提示框。默认情况下，对话框会仅有一个'确定'按钮。

• 本接口可以在iOS和Android上显示一个静态的提示框。如果要在显示提示框的同时接受用户输入一些信息，那你可能需要AlertIOS。

iOS
在iOS上你可以指定任意数量的按钮。每个按钮还都可以指定自己的样式，此外还可以指定提示的类别。参阅AlertIOS来了解更多细节。

Android
在Android上最多能指定三个按钮，这三个按钮分别具有“中间态”、“消极态”和“积极态”的概念：

如果你只指定一个按钮，则它具有“积极态”的属性（比如“确定”）；两个按钮，则分别是“消极态”和“积极态”（比如“取消”和“确定”）；三个按钮则意味着“中间态”、“消极态”和“积极态”（比如“稍候再说”，“取消”，“确定”）。

在Android上默认情况下点击提示框的外面会自动取消提示框。你可以提供一个额外参数来处理这一事件：{ onDismiss: () => {} }。

还有另外一个参数也可以用来阻止提示框被自动取消，即{ cancelable: false }。

一个简单的例子：

// iOS和Android上都可用

 Alert.alert(
  'Alert Title',
  'My Alert Msg',
  [
{text: 'Ask me later', onPress: () => console.log('Ask me later pressed')},
{text: 'Cancel', onPress: () => console.log('Cancel Pressed'), style: 'cancel'},
{text: 'OK', onPress: () => console.log('OK Pressed')},
 ],
 { cancelable: false }
   ) 

方法
static alert(title: string, message?: string, button?: Buttons, type?: AlertType)

例子：

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




 const onpressTest = () => {
    Alert.alert(
    '温馨提示',
    '我是Alert',
    [
        {text: '确定', onPress: () => console.log('Ask me later pressed')},
        {text: '取消', onPress: () => console.log('Cancel Pressed'), style: 'cancel'},
        {text: '其他', onPress: () => console.log('OK Pressed')},
    ],
    { cancelable: false }
);
}


  export default class AppButton extends Component {

    render() {
    return (
        <View style={styles.container}>
            <Text style={styles.welcome} >
                我是按钮界面
            </Text>


            <Button
                    title = "我是按钮快点击"
                    color = "red"
                    onPress = {onpressTest}

            >

            </Button>

        </View>
       );
    }
 }

const styles = StyleSheet.create({
container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
},
welcome: {
    fontSize: 20,
    textAlign: 'center',
    margin: 10,
   },
  });

image.png

如果去掉一个，只剩下两个按钮的话界面会变成这样

image.png