React-Native中Modal的使用

/** * React Native App * dongtao 2017/04/22 * @flow */@H_403_6@ import@H_403_6@ React,{ Component } from@H_403_6@ 'react'@H_403_6@; import@H_403_6@ { AppRegistry,StyleSheet,Text,Modal,PixelRatio,View } 'react-native'@H_403_6@; class@H_403_6@ ModalDemo@H_403_6@ extends@H_403_6@ Component@H_403_6@ @H_403_6@{ constructor@H_403_6@(props) { super@H_403_6@(props);//这一句不能省略，照抄即可@H_403_6@ this@H_403_6@.state = { animationType@H_403_6@: 'none'@H_403_6@,//none slide fade@H_403_6@ modalVisible: false@H_403_6@,161);">//模态场景是否可见@H_403_6@ transparent: true@H_403_6@,161);">//是否透明显示@H_403_6@ }; } render() { let@H_403_6@ modalBackgroundStyle = { backgroundColor@H_403_6@: this@H_403_6@.state.transparent ? 'rgba(0,0.5)'@H_403_6@ : 'red'@H_403_6@,}; let@H_403_6@ innerContainerTransparentStyle = this@H_403_6@.state.transparent ? { backgroundColor@H_403_6@: '#fff'@H_403_6@,padding@H_403_6@: 20@H_403_6@ } : null@H_403_6@; return@H_403_6@ ( <View@H_403_6@ style@H_403_6@={{@H_403_6@ alignItems:@H_403_6@ 'center@H_403_6@',flex:@H_403_6@ 1@H_403_6@ }}>@H_403_6@ Modal@H_403_6@ animationType@H_403_6@={this.state.animationType}@H_403_6@ transparent@H_403_6@={this.state.transparent}@H_403_6@ visible@H_403_6@={this.state.modalVisible}@H_403_6@ onRequestClose@H_403_6@={()@H_403_6@ =>@H_403_6@ { this._setModalVisible(false) } } onShow={this.startShow} > {[styles.container,@H_403_6@ modalBackgroundStyle@H_403_6@]}>@H_403_6@ {[styles.innerContainer,@H_403_6@ innerContainerTransparentStyle@H_403_6@]}>@H_403_6@ Text@H_403_6@ style@H_403_6@={styles.date}@H_403_6@>@H_403_6@2016-08-11</Text@H_403_6@>@H_403_6@ {styles.row}@H_403_6@>@H_403_6@ View@H_403_6@ >@H_403_6@ {styles.station}@H_403_6@>@H_403_6@长沙站{styles.mp10}@H_403_6@>@H_403_6@8: 00出发View@H_403_6@>@H_403_6@ {styles.at}@H_403_6@>@H_403_6@{[styles.mp10,@H_403_6@ { textAlign:@H_403_6@ 'center@H_403_6@' }]}>@H_403_6@G888{[styles.station,@H_403_6@ { textAlign:@H_403_6@ 'right@H_403_6@' }]}>@H_403_6@北京站403_6@ { textAlign:@H_403_6@ 'right@H_403_6@' }]}>@H_403_6@18: 00抵达{styles.mp10}@H_403_6@>@H_403_6@ Text@H_403_6@>@H_403_6@票价：￥600.00元Text@H_403_6@>@H_403_6@乘车人：东方耀Text@H_403_6@>@H_403_6@长沙站 火车南站 网售403_6@ styles.btn@H_403_6@,{ alignItems:@H_403_6@ 'center@H_403_6@' }]}>@H_403_6@ {styles.btn_text}@H_403_6@>@H_403_6@去支付Text@H_403_6@ onPress@H_403_6@={this._setModalVisible.bind(this,false)@H_403_6@ } style@H_403_6@={{fontSize:20,marginTop:10}}@H_403_6@>@H_403_6@ 关闭 Modal@H_403_6@>@H_403_6@ {{@H_403_6@ fontSize:@H_403_6@ 30@H_403_6@,color:@H_403_6@'red@H_403_6@' }} onPress@H_403_6@=403_6@ true@H_403_6@) }>@H_403_6@预定火车票View@H_403_6@>@H_403_6@@H_403_6@ ); } _setModalVisible = (visible@H_403_6@) =>@H_403_6@ { this@H_403_6@.setState({ modalVisible@H_403_6@: visible }); } startShow=()@H_403_6@=>@H_403_6@{ alert('开始显示了'@H_403_6@); } } const@H_403_6@ styles = StyleSheet.create({ container@H_403_6@: { flex@H_403_6@: 1@H_403_6@,justifyContent@H_403_6@: 'center'@H_403_6@,152);">40@H_403_6@,},innerContainer@H_403_6@: { borderRadius@H_403_6@: 10@H_403_6@,alignItems@H_403_6@: row@H_403_6@: { alignItems@H_403_6@: flex@H_403_6@: flexDirection@H_403_6@: 'row'@H_403_6@,marginBottom@H_403_6@: 20@H_403_6@,rowTitle@H_403_6@: { flex@H_403_6@: fontWeight@H_403_6@: 'bold'@H_403_6@,button@H_403_6@: { borderRadius@H_403_6@: 5@H_403_6@,height@H_403_6@: 44@H_403_6@,alignSelf@H_403_6@: 'stretch'@H_403_6@,overflow@H_403_6@: 'hidden'@H_403_6@,buttonText@H_403_6@: { fontSize@H_403_6@: 18@H_403_6@,margin@H_403_6@: textAlign@H_403_6@: page@H_403_6@: { flex@H_403_6@: position@H_403_6@: 'absolute'@H_403_6@,bottom@H_403_6@: 0@H_403_6@,left@H_403_6@: right@H_403_6@: top@H_403_6@: zhifu@H_403_6@: { height@H_403_6@: 150@H_403_6@,flex@H_403_6@: { flex@H_403_6@: at@H_403_6@: { borderWidth@H_403_6@: 1@H_403_6@ / PixelRatio.get(),width@H_403_6@: 80@H_403_6@,marginLeft@H_403_6@:marginRight@H_403_6@:borderColor@H_403_6@: '#18B7FF'@H_403_6@,marginTop@H_403_6@: 10@H_403_6@ },date@H_403_6@: { textAlign@H_403_6@: 5@H_403_6@ },station@H_403_6@: { fontSize@H_403_6@: 20@H_403_6@ },mp10@H_403_6@: { marginTop@H_403_6@: btn@H_403_6@: { width@H_403_6@: 60@H_403_6@,152);">30@H_403_6@,borderRadius@H_403_6@: 3@H_403_6@,backgroundColor@H_403_6@: '#FFBA27'@H_403_6@,btn_text@H_403_6@: { lineHeight@H_403_6@: color@H_403_6@: 'ModalDemo'@H_403_6@,() => ModalDemo); 
   
  
 
  @H_770_403@
    1.png 
  @H_325_404@ 
 @H_325_404@ 
@H_325_404@