广告屏react-native项目
您最多选择25个主题 主题必须以字母或数字开头,可以包含连字符 (-),并且长度不得超过35个字符
 
 
 
 
 

1086 行
31 KiB

  1. import React, { Component } from 'react';
  2. import {
  3. Platform,
  4. StyleSheet,
  5. Text,
  6. View,
  7. Image,
  8. ImageBackground,
  9. PixelRatio,
  10. NativeModules,
  11. } from 'react-native';
  12. //引用插件
  13. import Package from './package.json'
  14. import HttpUtils from './HttpUtils.js';
  15. import CodePush from "react-native-code-push";
  16. import DeviceInfo from "react-native-device-info";
  17. import * as Animatable from 'react-native-animatable';
  18. import Swiper from 'react-native-swiper';
  19. var testMac = 'FF:FF:FF:FF:FF:FF'
  20. var curAdIndex = 0;
  21. var curAdType02Index =0;
  22. var errorMsg = {
  23. ERR_MAC_GET:'设备编号获取错误',
  24. ERR_START_AD:'广告播放系统错误',
  25. ERR_DATA_GET:'广告数据获取错误',
  26. ERR_HEARTBEAT:'设备心跳数据错误',
  27. ERR_NO_DATA:'暂无优惠信息'
  28. }
  29. var animationThemes = [
  30. // 滑入
  31. {
  32. first:"slideInDown",
  33. second:"slideInLeft",
  34. third:"slideInRight"
  35. },
  36. // 放大
  37. {
  38. first:"zoomInDown",
  39. second:"zoomInLeft",
  40. third:"zoomInRight"
  41. },
  42. // 翻转
  43. {
  44. first:"flipInX",
  45. second:"flipInY",
  46. third:"flipInX"
  47. },
  48. // 弹出
  49. {
  50. first:"bounceInDown",
  51. second:"bounceInLeft",
  52. third:"bounceInRight"
  53. }
  54. ]
  55. var timer = null;
  56. var hbRequestCount
  57. var getAdDataCount
  58. var pageChangeCount
  59. var adDataList = [];
  60. var adDataBgList = [];
  61. var heartConfig = {
  62. heartbeatInterval:10,
  63. dataRefreshInterval:3600,
  64. pageChangeInterval:10,
  65. }
  66. var requestFailedCount = 0;
  67. var versionInfo = '';
  68. let codePushOptions = {
  69. //设置检查更新的频率
  70. //ON_APP_RESUME APP恢复到前台的时候
  71. //ON_APP_START APP开启的时候
  72. //MANUAL 手动检查
  73. checkFrequency : CodePush.CheckFrequency.ON_APP_START
  74. };
  75. export default class MyPage extends Component {
  76. constructor(props) {
  77. super(props);
  78. this.state = {
  79. baseInfo: null,
  80. contentItem0:null,
  81. contentItem1:null,
  82. contentItem2:null,
  83. animationTheme:animationThemes[0],
  84. contentDisplayStatus:false,
  85. syncMessage: "初始化..." ,
  86. errorMessage: '加载中...',
  87. progress: {
  88. receivedBytes:0,
  89. totalBytes:0
  90. },
  91. updating:true,
  92. macAddress: '',
  93. versionInfo:'未知',
  94. adType: 0,
  95. };
  96. /* this.codePushUpdate = this.codePushUpdate.bind(this);
  97. this.startAd = this.startAd.bind(this);
  98. this.showErrMsg = this.showErrMsg.bind(this); */
  99. }
  100. componentDidMount() {
  101. this.codePushUpdate();
  102. DeviceInfo.getMACAddress().then((mac)=>{
  103. if (mac=='' || mac==null ) {
  104. if (NativeModules.BuildConfig.buildType == 'debug') {
  105. this.setState({macAddress : this.testMac})
  106. this.startAd()
  107. } else {
  108. this.showErrMsg(errorMsg.ERR_MAC_GET);
  109. }
  110. } else {
  111. this.setState({macAddress : mac})
  112. this.startAd()
  113. }
  114. }).catch(e => {
  115. this.showErrMsg(errorMsg.ERR_START_AD);
  116. })
  117. }
  118. componentDidUpdate() {
  119. /* console.log(this.refs.scrollView)
  120. if (this.refs.scrollView != undefined) {
  121. var ScrollView = this.refs.scrollView;
  122. ScrollView.scrollBy(0, true);
  123. } */
  124. }
  125. //更新函数
  126. async codePushUpdate() {
  127. CodePush.allowRestart();
  128. await CodePush.getUpdateMetadata(CodePush.UpdateState.RUNNING)
  129. .then((metadata: LocalPackage) => {
  130. this.setState({ versionInfo: metadata ? 'b'+NativeModules.BuildConfig.versionCode+"-" + metadata.label : 'b'+ NativeModules.BuildConfig.versionCode});
  131. versionInfo = this.state.versionInfo;
  132. }, (error: any) => {
  133. this.setState({ versionInfo: "Unknown"});
  134. versionInfo = this.state.versionInfo;
  135. });
  136. await CodePush.sync(
  137. { mandatoryInstallMode: CodePush.InstallMode.ON_NEXT_RESTART,
  138. installMode: CodePush.InstallMode.ON_NEXT_RESTART},
  139. this.codePushStatusDidChange.bind(this),
  140. this.codePushDownloadDidProgress.bind(this)
  141. ).then((status: SyncStatus) => {
  142. }, (error: any) => {
  143. CodePush.restartApp();
  144. });
  145. }
  146. // 监听更新状态
  147. codePushStatusDidChange(syncStatus) {
  148. switch(syncStatus) {
  149. case CodePush.SyncStatus.CHECKING_FOR_UPDATE:
  150. this.setState({ syncMessage: "检查更新" });
  151. break;
  152. case CodePush.SyncStatus.DOWNLOADING_PACKAGE:
  153. this.setState({ syncMessage: "下载更新" });
  154. break;
  155. case CodePush.SyncStatus.AWAITING_USER_ACTION:
  156. this.setState({ syncMessage: "等待用户操作" });
  157. break;
  158. case CodePush.SyncStatus.INSTALLING_UPDATE:
  159. this.setState({ syncMessage: "安装更新" });
  160. break;
  161. case CodePush.SyncStatus.UP_TO_DATE:
  162. this.setState({ syncMessage: "已更新到最新程序", updating: false });
  163. break;
  164. case CodePush.SyncStatus.UPDATE_IGNORED:
  165. this.setState({ syncMessage: "更新被取消", updating: false });
  166. break;
  167. case CodePush.SyncStatus.UPDATE_INSTALLED:
  168. this.setState({ syncMessage: "更新已安装,重启应用后生效", updating: false });
  169. break;
  170. case CodePush.SyncStatus.UNKNOWN_ERROR:
  171. this.setState({ syncMessage: "未知错误", updating: false });
  172. break;
  173. }
  174. }
  175. codePushDownloadDidProgress(progress) {
  176. this.setState({ progress });
  177. }
  178. // 列表滚动
  179. updateContent() {
  180. if (adDataList.length <=0)
  181. return false;
  182. if (curAdIndex >= adDataList.length) {
  183. curAdIndex = 0;
  184. if (this.state.adType == 0) {
  185. this.setState({
  186. adType: 2,
  187. curAdType02Index: 0,
  188. });
  189. } else if (this.state.adType == 2) {
  190. if (curAdType02Index+1 < adDataBgList.length) {
  191. curAdType02Index++;
  192. } else {
  193. this.setState({
  194. adType: 0,
  195. curAdType02Index: 0,
  196. });
  197. }
  198. }
  199. }
  200. this.setState({contentItem0:adDataList[curAdIndex]});
  201. if (curAdIndex + 1 < adDataList.length)
  202. this.setState({contentItem1:adDataList[curAdIndex+1]});
  203. else
  204. this.setState({contentItem1:null});
  205. if (curAdIndex + 2 < adDataList.length)
  206. this.setState({contentItem2:adDataList[curAdIndex+2]});
  207. else
  208. this.setState({contentItem2:null});
  209. curAdIndex+=3
  210. return true;
  211. }
  212. hbRequest() {
  213. return HttpUtils.post(NativeModules.BuildConfig.apiHost
  214. + 'api/wxDeviceScreenAd/heartbeat?deviceId='
  215. + encodeURIComponent(this.state.macAddress),
  216. {version:this.state.versionInfo})
  217. .then(result => {
  218. if (result.code == 200) {
  219. let config = JSON.parse(result.data.config);
  220. heartConfig.heartbeatInterval = config.heartbeatInterval
  221. heartConfig.dataRefreshInterval=config.dataRefreshInterval
  222. heartConfig.pageChangeInterval=config.pageChangeInterval
  223. /* heartConfig.heartbeatInterval = 20
  224. heartConfig.dataRefreshInterval=20
  225. heartConfig.pageChangeInterval=2 */
  226. // 动画划入
  227. if(config.animationTheme == 0){
  228. this.setState({
  229. animationTheme:animationThemes[0]
  230. })
  231. }else if(config.animationTheme == 1){
  232. // 放大
  233. this.setState({
  234. animationTheme:animationThemes[1]
  235. })
  236. }else if(config.animationTheme == 2){
  237. // 淡入
  238. this.setState({
  239. animationTheme:animationThemes[2]
  240. })
  241. }else if(config.animationTheme == 3){
  242. // 弹入
  243. this.setState({
  244. animationTheme:animationThemes[3]
  245. })
  246. }
  247. } else {
  248. //do nothing
  249. }
  250. })
  251. .catch(error => {
  252. requestFailedCount++
  253. this.setState({ versionInfo: versionInfo+`[${requestFailedCount}]`});
  254. })
  255. }
  256.  showErrMsg(errMsg) {
  257. this.setState({contentDisplayStatus: false})
  258. this.setState({errorMessage : errMsg});
  259. }
  260. getAdDataList(first) {
  261. HttpUtils.get(NativeModules.BuildConfig.apiHost
  262. + 'api/wxDeviceScreenAd/list?deviceId='
  263. + encodeURIComponent(this.state.macAddress)
  264. + '&pageNum=1&pageSize=1000')
  265. .then(result => {
  266. if (result.code != 200) {
  267. this.showErrMsg(result.message+'\n'+this.state.macAddress);
  268. } else if (result.data.list) {
  269. //aaa
  270. result.data.list[4].type = 2;
  271. // result.data.list[4].coverImg = './image/ad1.jpg';
  272. result.data.list[5].type = 2;
  273. // result.data.list[5].coverImg = './image/ad2.jpg';
  274. console.log(result.data)
  275. //type==0的是券 1是? 2是广告大图
  276. adDataList = result.data.list.filter((item) => {
  277. return item.type == 0;
  278. })
  279. adDataBgList = result.data.list.filter((item) => {
  280. return item.type == 2;
  281. })
  282. console.log(adDataList)
  283. console.log(adDataBgList)
  284. console.log(adDataBgList[curAdType02Index].coverImg)
  285. //aaa
  286. // this.setState({adType: 2 })
  287. if (this.updateContent()) {
  288. this.setState({contentDisplayStatus: true})
  289. } else {
  290. this.showErrMsg(errorMsg.ERR_NO_DATA);
  291. }
  292. } else {
  293.  this.showErrMsg(errorMsg.ERR_DATA_GET);
  294. }
  295. })
  296. .catch(error => {
  297. if (first) {
  298. this.showErrMsg(error.message);
  299. }
  300. else {
  301. requestFailedCount++
  302. this.setState({ versionInfo: versionInfo+`[${requestFailedCount}]`});
  303. }
  304. })
  305. }
  306. getBaseInfo() {
  307. HttpUtils.get(NativeModules.BuildConfig.apiHost
  308. + 'api/wxDeviceScreenAd/info?deviceId='
  309. + encodeURIComponent(this.state.macAddress))
  310. .then(result => {
  311. if (result.code != 200) {
  312. this.showErrMsg(result.message+'\n'+this.state.macAddress);
  313. } else if (result.data) {
  314. this.setState({baseInfo:result.data});
  315. } else {
  316. this.showErrMsg(errorMsg.ERR_DATA_GET);
  317. }
  318. })
  319. .catch(error => {
  320. this.showErrMsg(error.message);
  321. })
  322. }
  323. componentWillUnmount(){
  324. if (timer)
  325. clearTimeout(timer)
  326. }
  327. async routine() {
  328. hbRequestCount -=1;
  329. getAdDataCount -=1;
  330. pageChangeCount -=1;
  331. try {
  332. if (getAdDataCount<=0) {
  333. this.getAdDataList(false)
  334. getAdDataCount = heartConfig.dataRefreshInterval
  335. } else if (hbRequestCount<=0) {
  336. this.hbRequest()
  337. hbRequestCount = heartConfig.heartbeatInterval
  338. }
  339. if (pageChangeCount <= 0) { //页面切换间隔
  340. if (this.state.contentDisplayStatus && this.state.baseInfo) {
  341. this.setState({ contentDisplayStatus: false})
  342. if (this.updateContent()) {
  343. this.setState({ contentDisplayStatus: true})
  344. }
  345. } else {
  346. await this.getBaseInfo()
  347. await this.getAdDataList(true)
  348. getAdDataCount = heartConfig.dataRefreshInterval
  349. hbRequestCount = heartConfig.heartbeatInterval
  350. }
  351. pageChangeCount = heartConfig.pageChangeInterval
  352. }
  353. } catch(e){
  354. this.setState({ versionInfo: versionInfo+'[E]'});
  355. }
  356. timer = setTimeout(()=>{
  357. this.routine();
  358. },1000);
  359. }
  360. startAd() {
  361. hbRequestCount = 0;
  362. getAdDataCount = 0;
  363. pageChangeCount = 0;
  364. this.routine();
  365. }
  366. getContentViewItemUplayer(contentItem) {
  367. if (contentItem.type == 0) {
  368. if (contentItem.subType == 2)
  369. return (<Image source={require('./image/timed.png')} resizeMode='center' style={styles.contentItemUpLayer} /> )
  370. if (contentItem.subType == 6)
  371. return (<Image source={require('./image/discount.png')} resizeMode='center' style={styles.contentItemUpLayer} /> )
  372. if (contentItem.subType == 7)
  373. return (<Image source={require('./image/groupbuy.png')} resizeMode='center' style={styles.contentItemUpLayer} /> )
  374. return null;
  375. }
  376. }
  377. getContentViewItemActionStr(contentItem) {
  378. if (contentItem.type == 0) {
  379. if (contentItem.subType == 2)
  380. return '扫码秒杀';
  381. else if (contentItem.subType == 6)
  382. return '扫码砍价';
  383. else if (contentItem.subType == 7)
  384. return '扫码拼团';
  385. else
  386. return '扫码领取';
  387. }
  388. }
  389. getContentViewItemMerchantName(contentItem) {
  390. if (contentItem.type == 0) {
  391. if (contentItem.target.merchantVoList.length > 1)
  392. return '多商户通用';
  393. else
  394. return contentItem.target.merchantVoList[0].merchantName;
  395. }
  396. }
  397. getContentViewItem(contentItem, annomation) {
  398. if (!contentItem)
  399. return (
  400. <View style={styles.contentItem}>
  401. </View>
  402. )
  403. actionText = this.getContentViewItemActionStr(contentItem);
  404. merchantName = this.getContentViewItemMerchantName(contentItem);
  405. // console.warn(annomation)
  406. return (
  407. <Animatable.View animation={annomation} style={styles.contentItem}>
  408. <ImageBackground source={require('./image/item-background.png')} resizeMode='center' style={styles.contentItemDownLayer} >
  409. {/* 列表 */}
  410. <View style={styles.contentItemTop}>
  411. <Image source={{uri: contentItem.coverImg}} resizeMode='cover' style={styles.contentItemTopCoverImg} />
  412. <View style={styles.contentItemTopDetail}>
  413. {/* 券的title */}
  414. <Text style={styles.contentItemTopDetailTitle} numberOfLines={2} ellipsizeMode="tail">{contentItem.target.title}</Text>
  415. <View style={styles.contentItemTopDetailPrice}>
  416. {/* 售价 */}
  417. <View style={styles.contentItemTopDetailCurPrice}>
  418. <Text style={styles.contentItemTopDetailCurPriceStrUnit}>¥</Text>
  419. <Text style={styles.contentItemTopDetailCurPriceStr}>{contentItem.target.salePriceStr}</Text>
  420. </View>
  421. {/* 面额 */}
  422. <View style={styles.contentItemTopDetailSalePrice}>
  423. <Text style={styles.contentItemTopDetailSalePriceStr} >¥{contentItem.target.priceStr}</Text>
  424. </View>
  425. </View>
  426. </View>
  427. {/* <Image source={{uri:'data:image/png;base64,'+contentItem.qrcode}} resizeMode='contain' style={styles.contentItemTopQrcode} /> */}
  428. <Image source={{uri:contentItem.target.qrCode}} resizeMode='contain' style={styles.contentItemTopQrcode} />
  429. </View>
  430. {/* 优惠券底部商户名称 */}
  431. <View style={styles.contentItemBottom}>
  432. <Text style={styles.contentItemBottomMerchantName}>{merchantName}</Text>
  433. <Text style={styles.contentItemBottomPlacehold}>{contentItem.target.merchantVoList[0].buildingName}{contentItem.target.merchantVoList[0].floorName}</Text>
  434. <Text style={styles.contentItemBottomAction}>{actionText}</Text>
  435. </View>
  436. </ImageBackground>
  437. {this.getContentViewItemUplayer(contentItem)}
  438. </Animatable.View>
  439. )
  440. }
  441. getContentView() {
  442. if (this.state.contentDisplayStatus) {
  443. return (<View style={styles.content}>
  444. {this.getContentViewItem(this.state.contentItem0,this.state.animationTheme.first)}
  445. {this.getContentViewItem(this.state.contentItem1,this.state.animationTheme.second)}
  446. {this.getContentViewItem(this.state.contentItem2,this.state.animationTheme.third)}
  447. </View>)
  448. }else{
  449. return (
  450. <View style={styles.content}>
  451. <Text style={styles.updatePage}>{this.state.errorMessage}</Text>
  452. </View>)
  453. }
  454. }
  455. setSwiperItemDom(contentItem, index) {
  456. return (
  457. <View style={styles.contentItemTopForAd} key={index}>
  458. <Image source={{uri: contentItem.coverImg}} resizeMode='cover' style={styles.adTypeItemImg} />
  459. <View style={styles.contentItemTopDetail}>
  460. {/* 券的title */}
  461. <Text style={styles.contentItemTopDetailTitle} numberOfLines={2} ellipsizeMode="tail">{contentItem.target.title}</Text>
  462. <View style={styles.contentItemTopDetailPrice}>
  463. {/* 售价 */}
  464. <View style={styles.contentItemTopDetailCurPrice}>
  465. <Text style={styles.contentItemTopDetailCurPriceStrUnit}>¥</Text>
  466. <Text style={styles.contentItemTopDetailCurPriceStr}>{contentItem.target.salePriceStr}</Text>
  467. </View>
  468. {/* 面额 */}
  469. <View style={styles.contentItemTopDetailSalePrice}>
  470. <Text style={styles.contentItemTopDetailSalePriceStr} >¥{contentItem.target.priceStr}</Text>
  471. </View>
  472. </View>
  473. </View>
  474. {/* <Image source={{uri:'data:image/png;base64,'+contentItem.qrcode}} resizeMode='contain' style={styles.contentItemTopQrcode} /> */}
  475. <Image source={{uri:contentItem.target.qrCode}} resizeMode='contain' style={styles.contentItemTopQrcode} />
  476. </View>
  477. )
  478. }
  479. renderAdTypeSwiper() {
  480. if (this.state.contentDisplayStatus) {
  481. let adSwiperDomStack = [];
  482. //aaa
  483. adDataList.map((item,index) => {
  484. item.target.qrCode = 'https://iformall-net.s3.cn-northwest-1.amazonaws.com.cn/null/73ddb1e4-8f19-4d5d-8387-742d3d5d2c77.png'
  485. adSwiperDomStack.push(this.setSwiperItemDom(item, index))
  486. })
  487. return adSwiperDomStack;
  488. }else{
  489. return (
  490. <View style={styles.content}>
  491. <Text style={styles.updatePage}>{this.state.errorMessage}</Text>
  492. </View>
  493. )
  494. }
  495. }
  496. getUpdateView() {
  497. if (this.state.progress.totalBytes > 0)
  498. return (
  499. <Text style={styles.updatePage}>{this.state.syncMessage}{'\n'}
  500. {this.state.progress.receivedBytes} of {this.state.progress.totalBytes} bytes received{'\n'}
  501. </Text>
  502. );
  503. return (
  504. <Text style={styles.updatePage}>{this.state.syncMessage}
  505. </Text>
  506. );
  507. }
  508. getAdView(){
  509. if (this.state.baseInfo) {
  510. if (this.state.adType == 0) {
  511. return (
  512. <ImageBackground style={styles.background} resizeMode='center' source={require('./image/background.png')}>
  513. {/* 头部title二维码开始 */}
  514. <View style={styles.title}>
  515. <View style={styles.titleImagePlace}>
  516. <Image source={require('./image/title.png')} resizeMode='center' style={styles.titleImage} />
  517. </View>
  518. <ImageBackground source={require('./image/title-qrcode.png') } resizeMode='center' style={styles.titleQrcodeBonder} >
  519. <View style={styles.titleQrcodePlacehold}></View>
  520. <Image source={{uri: this.state.baseInfo.imgQrcodeWeapp}} resizeMode='center' style={styles.titleQrcode} />
  521. <View style={styles.titleQrcodePlacehold}></View>
  522. </ImageBackground>
  523. </View>
  524. {/* 券列表展示列表开始 */}
  525. {this.getContentView()}
  526. {/* 底部商场信息展示开始 */}
  527. <View style={styles.bottom}>
  528. <View style={styles.bottomLogoBackground}>
  529. <Image source={{ uri: this.state.baseInfo.imgUrlH}} resizeMode='contain' style={styles.bottomLogo} />
  530. </View>
  531. <View style={styles.bottomQrcode1Background}>
  532. <Image source={{ uri: this.state.baseInfo.imgQrcodeWeapp}} resizeMode='center' style={styles.bottomQrcode1} />
  533. <Text style={styles.bottomQrcode1Str}>小程序</Text>
  534. </View>
  535. <View style={styles.bottomQrcode2Background}>
  536. <Image source={{ uri: this.state.baseInfo.imgQrcodeWemp}} resizeMode='center' style={styles.bottomQrcode2} />
  537. <Text style={styles.bottomQrcode1Str}>公众号</Text>
  538. </View>
  539. <Text style={styles.bottomPlacehold}>{this.state.versionInfo}</Text>
  540. </View>
  541. </ImageBackground>
  542. );
  543. } else if (this.state.adType == 2) {
  544. return (
  545. // <ImageBackground style={styles.adTypeBg} source={require('./image/ad1.jpg')}>
  546. <ImageBackground style={styles.adTypeBg} source={{ uri: adDataBgList[curAdType02Index].coverImg}}>
  547. {/* adType == 2 滚动轮播 */}
  548. <Swiper ref='scrollView' style={styles.adTypeSwiper02} autoplay={true} autoplayTimeout={1} showPagination={false}
  549. dotColor="transparent" activeDotColor="transparent" horizontal={true} showsButtons={false}>
  550. {this.renderAdTypeSwiper()}
  551. </Swiper>
  552. <View style={styles.bottomBox}>
  553. <View style={styles.bottomLogoBackground}>
  554. <Image source={{ uri: this.state.baseInfo.imgUrlH}} resizeMode='contain' style={styles.bottomLogo} />
  555. </View>
  556. <View style={styles.bottomQrcode1Background}>
  557. <Image source={{ uri: this.state.baseInfo.imgQrcodeWeapp}} resizeMode='center' style={styles.bottomQrcode1} />
  558. <Text style={styles.bottomQrcode1Str}>小程序</Text>
  559. </View>
  560. <View style={styles.bottomQrcode2Background}>
  561. <Image source={{ uri: this.state.baseInfo.imgQrcodeWemp}} resizeMode='center' style={styles.bottomQrcode2} />
  562. <Text style={styles.bottomQrcode1Str}>公众号</Text>
  563. </View>
  564. <Text style={styles.bottomPlacehold}>{this.state.versionInfo}</Text>
  565. </View>
  566. </ImageBackground>
  567. );
  568. }
  569. }
  570. else {
  571. return (
  572. <ImageBackground style={styles.background} resizeMode='center' source={require('./image/background.png')}>
  573. {/* 头部title二维码开始 */}
  574. <View style={styles.title}>
  575. </View>
  576. {/* 券列表展示列表开始 */}
  577. {this.getContentView()}
  578. {/* 底部商场信息展示开始 */}
  579. <View style={styles.bottom}>
  580. <View style={styles.bottomLogoBackground}>
  581. </View>
  582. <View style={styles.bottomQrcode1Background}>
  583. </View>
  584. <View style={styles.bottomQrcode2Background}>
  585. </View>
  586. <Text style={styles.bottomPlacehold}>{this.state.versionInfo}</Text>
  587. </View>
  588. </ImageBackground>
  589. );
  590. }
  591. }
  592. render() {
  593. if (this.state.updating) {
  594. return this.getUpdateView();
  595. }
  596. return this.getAdView();
  597. }
  598. }
  599. MyPage = CodePush(codePushOptions)(MyPage);
  600. const styles = StyleSheet.create({
  601. updatePage:{
  602. flex: 2,
  603. width:'100%',
  604. height:'100%',
  605. backgroundColor:'transparent',
  606. textAlign :'center',
  607. textAlignVertical:'center',
  608. fontSize: 63/PixelRatio.get(),
  609. color: 'darkblue'
  610. },
  611. //layer background
  612. background:{
  613. flex: 1,
  614. width:'100%',
  615. height:'100%'
  616. },
  617. //layer top
  618. title:{
  619. flex: 6,
  620. flexDirection: 'row',
  621. alignItems: 'center',
  622. paddingLeft:42/PixelRatio.get(),
  623. paddingRight:42/PixelRatio.get(),
  624. backgroundColor:'transparent'
  625. },
  626. content:{
  627. flex: 18,
  628. flexDirection: 'column',
  629. alignItems: 'center',
  630. backgroundColor:'transparent'
  631. },
  632. bottom:{
  633. flex: 2,
  634. flexDirection: 'row',
  635. alignItems: 'center',
  636. paddingLeft:42/PixelRatio.get(),
  637. paddingRight:42/PixelRatio.get(),
  638. backgroundColor:'transparent'
  639. },
  640. //layer title
  641. titleImagePlace: {
  642. flex: 2,
  643. paddingTop: '20%',
  644. paddingLeft: '15%',
  645. alignItems: 'center',
  646. backgroundColor:'transparent'
  647. },
  648. titleImage: {
  649. width:'100%',
  650. height:'100%',
  651. flex: 1,
  652. backgroundColor:'transparent'
  653. },
  654. titleQrcodeBonder: {
  655. width:'100%',
  656. height:'100%',
  657. alignItems: 'center',
  658. flexDirection: 'column',
  659. flex: 1,
  660. backgroundColor:'transparent'
  661. },
  662. titleQrcodePlacehold: {
  663. flex: 5,
  664. backgroundColor:'transparent'
  665. },
  666. titleQrcode: {
  667. flex: 6,
  668. width:'100%',
  669. height:'100%',
  670. backgroundColor:'transparent'
  671. },
  672. //layer bottom
  673. bottomLogoBackground: {
  674. flex: 3,
  675. borderRadius:16/PixelRatio.get(),
  676. marginTop: 26/PixelRatio.get(),
  677. marginBottom: 26/PixelRatio.get(),
  678. backgroundColor:'transparent',//'rgba(255,255,255,0.5)',
  679. },
  680. bottomLogo: {
  681. width:'100%',
  682. height:'100%',
  683. backgroundColor:'transparent'
  684. },
  685. bottomQrcode1Background : {
  686. flex: 1,
  687. width:'100%',
  688. height:'100%',
  689. marginLeft: 21/PixelRatio.get(),
  690. paddingTop: 27/PixelRatio.get(),
  691. paddingBottom: 11/PixelRatio.get(),
  692. flexDirection: 'column',
  693. backgroundColor:'transparent'
  694. },
  695. bottomQrcode2Background : {
  696. flex: 1,
  697. width:'100%',
  698. height:'100%',
  699. marginLeft: 21/PixelRatio.get(),
  700. paddingTop: 26/PixelRatio.get(),
  701. paddingBottom: 11/PixelRatio.get(),
  702. flexDirection: 'column',
  703. backgroundColor:'transparent'
  704. },
  705. bottomQrcode1: {
  706. flex: 2,
  707. width:'100%',
  708. height:'100%',
  709. backgroundColor:'transparent'
  710. },
  711. bottomQrcode2: {
  712. flex: 2,
  713. width:'100%',
  714. height:'100%',
  715. backgroundColor:'transparent'
  716. },
  717. bottomQrcode1Str: {
  718. flex: 1,
  719. textAlign :'center',
  720. textAlignVertical:'center',
  721. fontSize: 16/PixelRatio.get(),
  722. color : 'white',
  723. backgroundColor:'transparent'
  724. },
  725. bottomQrcode2Str: {
  726. flex: 1,
  727. textAlign :'center',
  728. textAlignVertical:'center',
  729. fontSize: 16/PixelRatio.get(),
  730. color : 'white',
  731. backgroundColor:'transparent'
  732. },
  733. bottomPlacehold: {
  734. flex: 8,
  735. width:'100%',
  736. height:'100%',
  737. backgroundColor:'transparent',
  738. textAlign :'right',
  739. textAlignVertical:'bottom',
  740. fontSize: 27/PixelRatio.get(),
  741. color : 'gray'
  742. },
  743. //layer content item
  744. contentItem:{
  745. flex: 1,
  746. width:'100%',
  747. height:'100%',
  748. flexDirection: 'column',
  749. backgroundColor:'transparent'
  750. },
  751. contentItemDownLayer:{
  752. position:'absolute',
  753. width:'100%',
  754. height:'100%',
  755. flexDirection: 'column',
  756. alignItems: 'center',
  757. backgroundColor:'transparent'
  758. },
  759. contentItemUpLayer:{
  760. width:210/PixelRatio.get(),
  761. height:153/PixelRatio.get(),
  762. position:'absolute',
  763. backgroundColor:'transparent'
  764. },
  765. contentItemTop:{
  766. flex: 3,
  767. width:'100%',
  768. height:'100%',
  769. paddingLeft: 66/PixelRatio.get(),
  770. paddingRight: 53/PixelRatio.get(),
  771. paddingTop: 40/PixelRatio.get(),
  772. flexDirection: 'row',
  773. alignItems: 'center',
  774. backgroundColor:'transparent'
  775. },
  776. contentItemBottom:{
  777. flex: 1,
  778. width:'100%',
  779. height:'100%',
  780. paddingLeft: 66/PixelRatio.get(),
  781. paddingRight: 53/PixelRatio.get(),
  782. paddingBottom: 40/PixelRatio.get(),
  783. flexDirection: 'row',
  784. alignItems: 'center',
  785. backgroundColor:'transparent'
  786. },
  787. //layer content item top
  788. contentItemTopCoverImg:{
  789. flex: 5,
  790. width:'100%',
  791. height:'100%',
  792. borderRadius:27/PixelRatio.get(),
  793. backgroundColor:'transparent'
  794. },
  795. contentItemTopDetail:{
  796. flex: 6,
  797. width:'100%',
  798. height:'100%',
  799. paddingLeft: 20/PixelRatio.get(),
  800. paddingRight: 20/PixelRatio.get(),
  801. alignItems: 'center',
  802. backgroundColor:'transparent'
  803. },
  804. contentItemTopQrcode:{
  805. flex: 5,
  806. width:'100%',
  807. height:'100%',
  808. borderWidth:1,
  809. borderColor:"blue",
  810. marginLeft:18/PixelRatio.get(),
  811. // backgroundColor:'transparent'
  812. },
  813. //layer content item bottom
  814. contentItemBottomMerchantName:{
  815. flex: 5,
  816. width:'100%',
  817. height:'100%',
  818. alignItems: 'center',
  819. color:"black",
  820. backgroundColor:'transparent',
  821. textAlign :'center',
  822. textAlignVertical:'center',
  823. fontSize: 27/PixelRatio.get(),
  824. fontWeight : 'bold'
  825. },
  826. contentItemBottomPlacehold:{
  827. flex: 6,
  828. fontSize: 27/PixelRatio.get(),
  829. paddingLeft: 27/PixelRatio.get(),
  830. paddingRight: 79/PixelRatio.get(),
  831. width:'100%',
  832. height:'100%',
  833. color:"black",
  834. textAlignVertical:'center',
  835. backgroundColor:'transparent',
  836. },
  837. contentItemBottomAction:{
  838. flex: 5,
  839. width:'100%',
  840. height:'100%',
  841. backgroundColor:'transparent',
  842. textAlign :'center',
  843. textAlignVertical:'center',
  844. fontSize: 36/PixelRatio.get(),
  845. color: 'black',
  846. // borderStyle:"solid",
  847. // borderWidth:1,
  848. // borderColor:"red"
  849. },
  850. // 券的title
  851. contentItemTopDetailTitle:{
  852. flex: 2,
  853. // height:'100%',
  854. width:'100%',
  855. marginTop:"2%",
  856. // borderStyle:"solid",
  857. // borderWidth:1,
  858. // borderColor:"red",
  859. backgroundColor:'transparent',
  860. textAlign :'left',
  861. color:"black",
  862. textAlignVertical:'center',
  863. fontSize: 53/PixelRatio.get(),
  864. },
  865. /*
  866. contentItemTopDetailRemark:{
  867. flex: 1,
  868. width:'100%',
  869. height:'100%',
  870. backgroundColor:'transparent',
  871. textAlign :'left',
  872. textAlignVertical:'center',
  873. fontSize: 27/PixelRatio.get(),
  874. color : 'gray'
  875. },
  876. */
  877. contentItemTopDetailPrice:{
  878. flex: 2,
  879. width:'100%',
  880. height:'100%',
  881. backgroundColor:'transparent',
  882. flexDirection: 'row',
  883. },
  884. // 售价的样式
  885. contentItemTopDetailCurPrice:{
  886. position:"absolute",
  887. bottom:10,
  888. left:0,
  889. width:'100%',
  890. height:'100%',
  891. flexDirection: 'row',
  892. backgroundColor:'transparent',
  893. },
  894. contentItemTopDetailCurPriceStr:{
  895. backgroundColor:'transparent',
  896. fontSize:96/PixelRatio.get(),
  897. fontFamily:"PingFangSC-Bold",
  898. fontWeight: "bold",
  899. textAlign :'left',
  900. textAlignVertical:'bottom',
  901. color : 'red'
  902. },
  903. contentItemTopDetailCurPriceStrUnit:{
  904. backgroundColor:'transparent',
  905. textAlign :'left',
  906. textAlignVertical:'bottom',
  907. paddingBottom: 16/PixelRatio.get(),
  908. fontSize: 48/PixelRatio.get(),
  909. color : 'red'
  910. },
  911. // 面额的样式
  912. contentItemTopDetailSalePrice:{
  913. position:"absolute",
  914. bottom:2,
  915. left:0,
  916. // flex: 1,
  917. paddingTop:50,
  918. width:'100%',
  919. // height:'100%',
  920. backgroundColor:'transparent',
  921. },
  922. contentItemTopDetailSalePriceStr:{
  923. width:'100%',
  924. height:'100%',
  925. backgroundColor:'transparent',
  926. textAlign :'left',
  927. textAlignVertical:'bottom',
  928. fontSize: 27/PixelRatio.get(),
  929. textDecorationLine: 'line-through',
  930. color : 'gray'
  931. },
  932. adTypeBg:{
  933. flex: 1,
  934. width: '100%',
  935. height: '100%'
  936. },
  937. adTypeSwiper02:{
  938. position: 'absolute',
  939. left: 0,
  940. bottom: 120,
  941. width: '100%',
  942. height: 134,
  943. marginLeft: 10,
  944. borderColor: 'red',
  945. borderWidth: 10
  946. },
  947. adTypeItemImgWrap:{
  948. flex: 1,
  949. width: '100%',
  950. height: 134,
  951. flexDirection: 'row',
  952. alignItems: 'center',
  953. },
  954. adTypeItemImg:{
  955. width: 90,
  956. height: 90,
  957. borderRadius:27/PixelRatio.get(),
  958. backgroundColor:'transparent'
  959. },
  960. bottomBox:{
  961. position: 'absolute',
  962. bottom: 20/PixelRatio.get(),
  963. left: 0,
  964. width: '100%',
  965. height: 130/PixelRatio.get(),
  966. flexDirection: 'row',
  967. alignItems: 'center',
  968. backgroundColor:'transparent',
  969. borderColor: 'red',
  970. borderWidth: 1
  971. },
  972. contentItemTopForAd:{
  973. flex: 1,
  974. width:'100%',
  975. height:'100%',
  976. paddingLeft: 30/PixelRatio.get(),
  977. paddingRight: 26/PixelRatio.get(),
  978. paddingTop: 10/PixelRatio.get(),
  979. flexDirection: 'row',
  980. alignItems: 'center',
  981. backgroundColor:'#fff',
  982. borderColor: 'red',
  983. borderWidth: 1,
  984. borderRadius: 6,
  985. },
  986. });