美文网首页
React-Native AlertIOS的简单使用

React-Native AlertIOS的简单使用

作者: 煎包小混沌 | 来源:发表于2017-08-03 14:05 被阅读0次

    AlertIOS提示对话框,如果只是很简单的提醒框,介意使用Alert跨平台

    方法:
    static alert(
        title: ?string,
        message?: ?string,
        callbackOrButtons?: ?(() => void) | ButtonsArray,
        type?: AlertType,
      )
    
    带输入框
    static prompt(
        title: ?string,
        message?: ?string,
        callbackOrButtons?: ?((text: string) => void) | ButtonsArray,
        type?: ?AlertType = 'plain-text',
        defaultValue?: string,
        keyboardType?: string
      )
    

    参数说明:title弹出框标题,message说明文字,callbackOrButtons按钮的回调,是个包含对象的数组,type类型, defaultValue输入框默认文字,keyboardType调用键盘的类型

    界面展示:
    16EB31E6-85A6-42A3-B460-B5AB0F8313C3.png 96636127-4FE8-4BD8-AF7E-23111EB1DCD8.png
    代码展示:
    import React, { Component } from 'react'
    import {
        AppRegistry,
        AlertIOS,
        View,
        TouchableOpacity,
        Text,
    } from 'react-native';
    
    class AlertIOSView extends Component {
        customButtons: Array<Object>;
    
        constructor(props){
            super(props);
            this.state = {
                alertTitle: 'none',
                alertTitle22: 'none'
            };
            this.customButtons = [{
                text: 'OK',
                onPress: this.saveResponse
            }, {
                text: 'Cancel',
                style: 'cancel',
            }];
        }
        render() {
            return (
                <View style={{flex: 1, backgroundColor: '#ffaaff', justifyContent: 'center', alignItems: 'center'}}>
                    <TouchableOpacity onPress={this._showAlertIOS}>
                    <Text>alertIOS + {this.state.alertTitle}</Text>
                </TouchableOpacity>
                    <TouchableOpacity onPress={this._showAlertIOSInput}>
                        <Text>alertIOSInput + {this.state.alertTitle22}</Text>
                    </TouchableOpacity>
                </View>
            )
        }
        _showAlertIOS =()=> {
            AlertIOS.alert(
                'Title Name',
                'Message msg',
                [
                    {text: 'one', onPress: ()=>this.setState({alertTitle: 'one press'})},
                    {text: 'two', onPress: ()=>this.setState({alertTitle: 'two press'})},
                    {text: 'therr', onPress: ()=>this.setState({alertTitle: 'therr press'})}
                ]
            )
        };
        _showAlertIOSInput =()=> {
            AlertIOS.prompt(
                'Title Name',
                'Message msg',
                this.customButtons,
                'plain-text',
                'naanana',
    
            )
        };
        saveResponse =(promptValue)=> {
            this.setState({ alertTitle22: JSON.stringify(promptValue) });
        }
    }
    AppRegistry.registerComponent('AlertIOSView', ()=>AlertIOSView);
    

    相关文章

      网友评论

          本文标题:React-Native AlertIOS的简单使用

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