React-Native AlertIOS的简单使用

2017-08-03  本文已影响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);
上一篇下一篇

猜你喜欢

热点阅读