React Native之Modal组件实现遮罩层效果
来源:互联网 发布:ubuntu怎么连无线 编辑:程序博客网 时间:2024/06/03 11:16
React-Native中Modal的使用
/** * React Native App * dongtao 2017/04/22 * @flow */import React, { Component } from 'react';import { AppRegistry, StyleSheet, Text, Modal, PixelRatio, View} from 'react-native';class ModalDemo extends Component { constructor(props) { super(props);//这一句不能省略,照抄即可 this.state = { animationType: 'none',//none slide fade modalVisible: false,//模态场景是否可见 transparent: true,//是否透明显示 }; } render() { let modalBackgroundStyle = { backgroundColor: this.state.transparent ? 'rgba(0, 0, 0, 0.5)' : 'red', }; let innerContainerTransparentStyle = this.state.transparent ? { backgroundColor: '#fff', padding: 20 } : null; return ( <View style={{ alignItems: 'center', flex: 1 }}> <Modal animationType={this.state.animationType} transparent={this.state.transparent} visible={this.state.modalVisible} onRequestClose={() => { this._setModalVisible(false) } } onShow={this.startShow} > <View style={[styles.container, modalBackgroundStyle]}> <View style={[styles.innerContainer, innerContainerTransparentStyle]}> <Text style={styles.date}>2016-08-11</Text> <View style={styles.row}> <View > <Text style={styles.station}>长沙站</Text> <Text style={styles.mp10}>8: 00出发</Text> </View> <View> <View style={styles.at}></View> <Text style={[styles.mp10, { textAlign: 'center' }]}>G888</Text> </View> <View > <Text style={[styles.station, { textAlign: 'right' }]}>北京站</Text> <Text style={[styles.mp10, { textAlign: 'right' }]}>18: 00抵达</Text> </View> </View> <View style={styles.mp10}> <Text>票价:¥600.00元</Text> <Text>乘车人:东方耀</Text> <Text>长沙站 火车南站 网售</Text> </View> <View style={[styles.mp10, styles.btn, { alignItems: 'center' }]}> <Text style={styles.btn_text}>去支付</Text> </View> <Text onPress={this._setModalVisible.bind(this,false) } style={{fontSize:20,marginTop:10}}> 关闭 </Text> </View> </View> </Modal> <Text style={{ fontSize: 30,color:'red' }} onPress={this._setModalVisible.bind(this, true) }>预定火车票</Text> </View> ); } _setModalVisible = (visible) => { this.setState({ modalVisible: visible }); } startShow=()=>{ alert('开始显示了'); }}const styles = StyleSheet.create({ container: { flex: 1, justifyContent: 'center', padding: 40, }, innerContainer: { borderRadius: 10, alignItems: 'center', }, row: { alignItems: 'center', flex: 1, flexDirection: 'row', marginBottom: 20, }, rowTitle: { flex: 1, fontWeight: 'bold', }, button: { borderRadius: 5, flex: 1, height: 44, alignSelf: 'stretch', justifyContent: 'center', overflow: 'hidden', }, buttonText: { fontSize: 18, margin: 5, textAlign: 'center', }, page: { flex: 1, position: 'absolute', bottom: 0, left: 0, right: 0, top: 0, }, zhifu: { height: 150, }, flex: { flex: 1, }, at: { borderWidth: 1 / PixelRatio.get(), width: 80, marginLeft:10, marginRight:10, borderColor: '#18B7FF', height: 1, marginTop: 10 }, date: { textAlign: 'center', marginBottom: 5 }, station: { fontSize: 20 }, mp10: { marginTop: 5, }, btn: { width: 60, height: 30, borderRadius: 3, backgroundColor: '#FFBA27', padding: 5, }, btn_text: { lineHeight: 18, textAlign: 'center', color: '#fff', },});AppRegistry.registerComponent('ModalDemo', () => ModalDemo);
阅读全文
0 0
- React Native之Modal组件实现遮罩层效果
- React Native之Modal组件实现遮罩层效果
- React-Native 组件之 Modal
- React Native之Modal实现自定义Dialog
- React-Native学习笔记之:Modal实现覆盖效果(类似安卓中PopuWindow)
- React-Native 组件之 Modal的使用详解
- react native Modal 实现ActionSheet
- react native 实现modal的自适应大小
- React Native 控件之 Modal 详解
- React Native 之 Modal介绍与使用
- React-Native 之 Modal介绍与使用
- React Native学习中之modal
- React-Native 之 Modal介绍与使用
- React-Native 之 Modal介绍与使用
- react-native-modal-alert
- react-native Modal使用
- react-native modal封装
- React Native 自定义modal
- 安卓网络数据缓存策略
- 802.11 无线权威指南学习 ---- 网络概论
- 22th【贪心&&优先队列】打地鼠游戏
- CentOS7 编译安装 Zabbix 3.2.6
- JS复习3
- React Native之Modal组件实现遮罩层效果
- 自然数幂和 斯特林数
- Hadoop基础教程-第9章 HA高可用(9.3 HDFS 高可用运行)(草稿)
- javascript报错原因
- scp和rsync--ssh文件传输
- 将 Tomcat 和 Eclipse 相关联
- udp_server
- 洛谷P1085 不高兴的津津
- windows10 下不能访问Hadoop在虚拟机中部署的完全分布式的hdfs和mapreduce问题