標籤:react natve
組件名稱:Alert、AlertIOS 具體代碼如下
/*彈出層測試*/import React,{Component} from ‘react‘;import { StyleSheet, View, Image, Text, TouchableOpacity, ScrollView, Navigator, Alert, //引入Alert組件 TouchableHighlight, AlertIOS //引入AlertIOS組件} from ‘react-native‘;//建立一個組件class CustomButton extends Component { render() { return ( <TouchableHighlight style={styles.button} underlayColor="red" //觸摸的時候顏色改變 onPress={this.props.onPress}> //當前觸發時間 <Text style={styles.buttonText}>{this.props.text}</Text> </TouchableHighlight> ); }}//預設輸出組件export default class AlertDemo extends Component { render() { return ( <View style={styles.container}> <Text style={{height:30,color:‘black‘,margin:8}}> 彈出框執行個體 </Text> //觸發事件 <CustomButton text=‘點擊彈出預設Alert‘ onPress={()=>Alert.alert(‘溫馨提醒‘,‘確定退出嗎?‘)} /> <CustomButton text=‘點擊彈出兩個按鈕的Alert‘ onPress={()=>Alert.alert(‘溫馨提醒‘,‘確定退出嗎?‘,[ {text:‘取消‘}, {text:‘確定‘,} ])} /> <CustomButton text=‘點擊彈出三個按鈕的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=‘點擊出現輸入框‘ 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‘,}})
React native 的彈出層組件使用