(一)iOS平臺相關
只有iOS平臺可以指定多個數量的button,每個按鈕都可以設置特殊的風格，不過風格為'default','cancel','destructive'三種狀態(tài)之一拿穴。
(二)Android平臺相關
iOS平臺可以指定多個數量的button叶圃，但是在Android平臺上面最多只能指定三個按鈕。Android平臺的彈出框的按鈕有'中間態(tài)','取消','確認'三種狀態(tài)
1.如果你只有指定了一個按鈕布轿，那么該為'positive' (例如:確定)
2.如果你指定了兩個按鈕，那么該會'negative','positive' (例如:確定，取消)
3.如果你指定了三個按鈕汰扭，那么該會'neutral','negative','positive'(例如:稍后再說,'確定','取消')
(三)Alert方法
static alert(title:string,message?:string,buttons?:Buttons,type?:AlertType) 該會Alert模塊顯示彈框的靜態(tài)方法稠肘，有四個參數，分別為標題萝毛，信息项阴，按鈕，以及按鈕的風格類型
(四)Alert使用實例
上面已經講解了Alert模塊的基本介紹笆包，現在來演示一下該模塊的具體使用环揽，實例代碼如下:
/**
* React Native Alert模塊具體使用實例
* [https://github.com/facebook/react-native](https://github.com/facebook/react-native)
*/
'use strict'
;
import React, {
AppRegistry,
Component,
StyleSheet,
Text,
View,
Alert,
ToastAndroid,
TouchableHighlight,
} from
'react-native'
;
class CustomButton extends React.Component {
render() {
return
(
<TouchableHighlight
style={styles.button}
underlayColor=
"#a5a5a5"
onPress={
this
.props.onPress}>
<Text style={styles.buttonText}>{
this
.props.text}</Text>
</TouchableHighlight>
);
}
}
class AlertDemo extends Component {
render() {
return
(
<View>
<Text style={{height:30,color:
'black'
,margin:8}}>
彈出框實例
</Text>
<CustomButton text=
'點擊彈出默認Alert'
onPress={()=>Alert.alert(
'溫馨提醒'
,
'確定退出嗎?'
)}
/>
<CustomButton text=
'點擊彈出兩個按鈕的Alert'
onPress={()=>Alert.alert(
'溫馨提醒'
,
'確定退出嗎?'
,[
{text:
'取消'
,onPress:()=>ToastAndroid.show(
'你點擊了取消~'
,ToastAndroid.SHORT)},
{text:
'確定'
,onPress:()=>ToastAndroid.show(
'你點擊了確定~'
,ToastAndroid.SHORT)}
])}
/>
<CustomButton text=
'點擊彈出三個按鈕的Alert'
onPress={()=>Alert.alert(
'溫馨提醒'
,
'確定退出嗎?'
,[
{text:
'One'
,onPress:()=>ToastAndroid.show(
'你點擊了One~'
,ToastAndroid.SHORT)},
{text:
'Two'
,onPress:()=>ToastAndroid.show(
'你點擊了Two~'
,ToastAndroid.SHORT)},
{text:
'Three'
,onPress:()=>ToastAndroid.show(
'你點擊了Three~'
,ToastAndroid.SHORT)}
])}
/>
</View>
);
}
}
const styles = StyleSheet.create({
button: {
margin:5,
backgroundColor:
'white'
,
padding: 15,
borderBottomWidth: StyleSheet.hairlineWidth,
borderBottomColor:
'#cdcdcd'
,
}
});
AppRegistry.registerComponent(
'AlertDemo'
, () => AlertDemo);
