React native 的弹出层(输入)效果
/*弹出层测试*/ 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', } })