React Native组件学习 Alert(ES6)

作者: 天方夜歌 | 来源:发表于2018-04-22 10:20 被阅读60次

不管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

相关文章

网友评论

    本文标题:React Native组件学习 Alert(ES6)

    本文链接:https://www.haomeiwen.com/subject/pbmqlftx.html