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