React native 的彈出層組件使用

組件名稱：Alert、AlertIOS  具體代碼如下    

/*彈出層測(cè)試*/
import React,{Component} from 'react';
import {
  StyleSheet,
  View,
  Image,
  Text,
  TouchableOpacity,
  ScrollView,
  Navigator,
  Alert, //引入Alert組件
  TouchableHighlight,
  AlertIOS  //引入AlertIOS組件
} from 'react-native';
//創(chuàng)建一個(gè)組件
class CustomButton extends Component {
  render() {
    return (
      <TouchableHighlight    
        style={styles.button}
        underlayColor="red"   //觸摸的時(shí)候顏色改變
        onPress={this.props.onPress}>  //當(dāng)前觸發(fā)時(shí)間
        <Text style={styles.buttonText}>{this.props.text}</Text>
      </TouchableHighlight>
    );
  }
}
//默認(rèn)輸出組件
export default class AlertDemo extends Component {
  render() {
    return (
      <View style={styles.container}>
        <Text style={{height:30,color:'black',margin:8}}>
          彈出框?qū)嵗?        </Text>
        //觸發(fā)事件
        <CustomButton text='點(diǎn)擊彈出默認(rèn)Alert'
          onPress={()=>Alert.alert('溫馨提醒','確定退出嗎?')}
          />
        <CustomButton text='點(diǎn)擊彈出兩個(gè)按鈕的Alert'
          onPress={()=>Alert.alert('溫馨提醒','確定退出嗎?',[
            {text:'取消'},
            {text:'確定',}
            ])}
          />
        <CustomButton text='點(diǎn)擊彈出三個(gè)按鈕的Alert'
          onPress={()=>AlertIOS.alert('溫馨提醒','確定退出嗎?',[
            {text:'One'},
            {text:'Two'},
            {text:'Two'},
            {text:'Two'},
            {text:'Two'},
            {text:'Two'},
            {text:'Two'},
            {text:'Two'},
            {text:'Two'},
            {text:'Two'},
            {text:'Two'},
            {text:'Two'},
            ])}
          />
          <CustomButton text='點(diǎn)擊出現(xiàn)輸入框'
            onPress={()=>AlertIOS.prompt('溫馨提醒','確定退出嗎?',[
              {text:'取消'},
              {text:'確定',}
              ])}
            />

      </View>
    );
  }
}



var styles = StyleSheet.create({
  container:{
    backgroundColor:"#fff",
    flex:1,
    marginTop:65,
},
button: {
  margin:5,
  backgroundColor: 'white',
  padding: 15,
  borderBottomWidth: StyleSheet.hairlineWidth,
  borderBottomColor: '#cdcdcd',
}


})