广告屏react-native项目
Nelze vybrat více než 25 témat Téma musí začínat písmenem nebo číslem, může obsahovat pomlčky („-“) a může být dlouhé až 35 znaků.
 
 
 
 
 

603 řádky
18 KiB

  1. import React, { Component } from 'react';
  2. import {
  3. StyleSheet,
  4. Text,
  5. View,
  6. Image,
  7. ImageBackground,
  8. } from 'react-native';
  9. //引用插件
  10. import Package from './package.json'
  11. import HttpUtils from './HttpUtils.js';
  12. import CodePush from "react-native-code-push";
  13. import DeviceInfo from "react-native-device-info";
  14. import * as Animatable from 'react-native-animatable';
  15. contentItemDefault = {
  16. coverImg:'',
  17. qrcode:[],
  18. target:{
  19. title:'',
  20. subTitle:'',
  21. priceStr:'',
  22. salePriceStr:'',
  23. remark:'',
  24. }
  25. }
  26. baseInfoDefault = {
  27. imgUrlH:'',
  28. imgQrcodeWeapp:'',
  29. imgQrcodeWemp:''
  30. }
  31. export default class MyPage extends Component {
  32. constructor(props) {
  33. super(props);
  34. this.state = {
  35. baseInfo: baseInfoDefault,
  36. adDataList:[],
  37. contentItem1:contentItemDefault,
  38. contentItem2:contentItemDefault,
  39. contentItem3:contentItemDefault,
  40. contentDisplayStatus:true,
  41. syncMessage: "INIT" ,
  42. progress: {
  43. receivedBytes:0,
  44. totalBytes:0
  45. },
  46. macAddress: "NULL",
  47. text:'',
  48. versionInfo:'UNKNOWN'
  49. };
  50. DeviceInfo.getMACAddress().then(mac=>{this.setState({macAddress:mac})})
  51. DeviceInfo.getIPAddress().then(mac=>{this.setState({macAddress:mac})})
  52. }
  53. // 监听更新状态
  54. codePushStatusDidChange(syncStatus) {
  55. switch(syncStatus) {
  56. case CodePush.SyncStatus.CHECKING_FOR_UPDATE:
  57. this.setState({ syncMessage: "Checking for update." });
  58. break;
  59. case CodePush.SyncStatus.DOWNLOADING_PACKAGE:
  60. this.setState({ syncMessage: "Downloading package." });
  61. break;
  62. case CodePush.SyncStatus.AWAITING_USER_ACTION:
  63. this.setState({ syncMessage: "Awaiting user action." });
  64. break;
  65. case CodePush.SyncStatus.INSTALLING_UPDATE:
  66. this.setState({ syncMessage: "Installing update." });
  67. break;
  68. case CodePush.SyncStatus.UP_TO_DATE:
  69. this.setState({ syncMessage: "App up to date.", progress: false });
  70. break;
  71. case CodePush.SyncStatus.UPDATE_IGNORED:
  72. this.setState({ syncMessage: "Update cancelled by user.", progress: false });
  73. break;
  74. case CodePush.SyncStatus.UPDATE_INSTALLED:
  75. this.setState({ syncMessage: "Update installed and will be applied on restart.", progress: false });
  76. break;
  77. case CodePush.SyncStatus.UNKNOWN_ERROR:
  78. this.setState({ syncMessage: "An unknown error occurred.", progress: false });
  79. break;
  80. }
  81. }
  82. codePushDownloadDidProgress(progress) {
  83. this.setState({ progress });
  84. }
  85. getAdDataList() {
  86. HttpUtils.get('https://mall.youlane.cn/api/wxDeviceScreenAd/list?deviceId=11%3AAA%3A33%3ABB%3A44&pageNum=1&pageSize=5')
  87. .then(result => {
  88. this.setState({
  89. adDataList : result.data.list});
  90. if (this.state.adDataList.length > 0)
  91. this.setState({
  92. contentItem1 : this.state.adDataList[0]});
  93. })
  94. .catch(error => console.error(error))
  95. }
  96. getBaseInfo() {
  97. HttpUtils.get('https://mall.youlane.cn/api/wxDeviceScreenAd/info?deviceId=11%3AAA%3A33%3ABB%3A44')
  98. .then(result => {
  99. this.setState({
  100. baseInfo:result.data});
  101. })
  102. .catch(error => console.error(error))
  103. }
  104. componentDidMount() {
  105. CodePush.allowRestart();
  106. CodePush.sync(
  107. { installMode: CodePush.InstallMode.IMMEDIATE},
  108. this.codePushStatusDidChange.bind(this),
  109. this.codePushDownloadDidProgress.bind(this)
  110. );
  111. CodePush.getUpdateMetadata(CodePush.UpdateState.RUNNING)
  112. .then((metadata: LocalPackage) => {
  113. this.setState({ versionInfo: metadata ? metadata.appVersion + "-" + metadata.label : "Unknown"});
  114. }, (error: any) => {
  115. this.setState({ versionInfo: "Unknown"});
  116. });
  117. this.getBaseInfo()
  118. this.getAdDataList()
  119. setInterval(
  120. ()=>{
  121. this.setState({ contentDisplayStatus: false})
  122. this.setState({ contentDisplayStatus: true})
  123. },
  124. 5000,
  125. );
  126. }
  127. render() {
  128. if (this.state.progress) {
  129. if (this.state.progress.totalBytes > 0)
  130. return (
  131. <Text style={styles.updatePage}>{this.state.syncMessage}{'\n'}
  132. {this.state.progress.receivedBytes} of {this.state.progress.totalBytes} bytes received{'\n'}
  133. {this.state.text}
  134. </Text>
  135. );
  136. return (
  137. <Text style={styles.updatePage}>{this.state.syncMessage}{'\n'}
  138. {this.state.text}
  139. </Text>
  140. );
  141. }
  142. if (this.state.contentDisplayStatus) {
  143. var content = (<View style={styles.content}>
  144. <Animatable.View animation="slideInDown" style={styles.contentItem}>
  145. <ImageBackground source={require('./image/item-background.png')} resizeMode='center' style={styles.contentItemDownLayer} >
  146. <View style={styles.contentItemTop}>
  147. <Image source={{uri: this.state.contentItem1.coverImg}} resizeMode='cover' style={styles.contentItemTopCoverImg} />
  148. <View style={styles.contentItemTopDetail}>
  149. <Text style={styles.contentItemTopDetailTitle}>{this.state.contentItem1.target.title}</Text>
  150. <Text style={styles.contentItemTopDetailRemark}>{this.state.contentItem1.target.remark}</Text>
  151. <View style={styles.contentItemTopDetailPrice}>
  152. <View style={styles.contentItemTopDetailCurPrice}>
  153. <Text style={styles.contentItemTopDetailCurPriceStr}>{this.state.contentItem1.target.priceStr}</Text>
  154. <Text style={styles.contentItemTopDetailCurPriceStrUnit}>元</Text>
  155. </View>
  156. <View style={styles.contentItemTopDetailSalePrice}>
  157. <Text style={styles.contentItemTopDetailSalePriceStr} >{this.state.contentItem1.target.salePriceStr}元</Text>
  158. </View>
  159. </View>
  160. </View>
  161. <Image source={{uri:'data:image/png;base64,'+this.state.contentItem1.qrcode}} resizeMode='contain' style={styles.contentItemTopQrcode} />
  162. </View>
  163. <View style={styles.contentItemBottom}>
  164. <Text style={styles.contentItemBottomMerchantName}>肯德基</Text>
  165. <View style={styles.contentItemBottomPlacehold}></View>
  166. <Text style={styles.contentItemBottomAction}>扫码领取</Text>
  167. </View>
  168. </ImageBackground>
  169. <Image source={require('./image/discount.png')} resizeMode='center' style={styles.contentItemUpLayer} />
  170. </Animatable.View>
  171. <Animatable.View animation="slideInLeft" style={styles.contentItem}>
  172. <ImageBackground source={require('./image/item-background.png')} resizeMode='center' style={styles.contentItemDownLayer} >
  173. <View style={styles.contentItemTop}>
  174. <Image source={{uri: this.state.contentItem1.coverImg}} resizeMode='cover' style={styles.contentItemTopCoverImg} />
  175. <View style={styles.contentItemTopDetail}>
  176. <Text style={styles.contentItemTopDetailTitle}>{this.state.contentItem1.target.title}</Text>
  177. <Text style={styles.contentItemTopDetailRemark}>{this.state.contentItem1.target.remark}</Text>
  178. <View style={styles.contentItemTopDetailPrice}>
  179. <View style={styles.contentItemTopDetailCurPrice}>
  180. <Text style={styles.contentItemTopDetailCurPriceStr}>{this.state.contentItem1.target.priceStr}</Text>
  181. <Text style={styles.contentItemTopDetailCurPriceStrUnit}>元</Text>
  182. </View>
  183. <View style={styles.contentItemTopDetailSalePrice}>
  184. <Text style={styles.contentItemTopDetailSalePriceStr} >{this.state.contentItem1.target.salePriceStr}元</Text>
  185. </View>
  186. </View>
  187. </View>
  188. <Image source={{uri:'data:image/png;base64,'+this.state.contentItem1.qrcode}} resizeMode='contain' style={styles.contentItemTopQrcode} />
  189. </View>
  190. <View style={styles.contentItemBottom}>
  191. <Text style={styles.contentItemBottomMerchantName}>肯德基</Text>
  192. <View style={styles.contentItemBottomPlacehold}></View>
  193. <Text style={styles.contentItemBottomAction}>扫码领取</Text>
  194. </View>
  195. </ImageBackground>
  196. <Image source={require('./image/discount.png')} resizeMode='center' style={styles.contentItemUpLayer} />
  197. </Animatable.View>
  198. <Animatable.View animation="slideInRight" style={styles.contentItem}>
  199. <ImageBackground source={require('./image/item-background.png')} resizeMode='center' style={styles.contentItemDownLayer} >
  200. <View style={styles.contentItemTop}>
  201. <Image source={{uri: this.state.contentItem1.coverImg}} resizeMode='cover' style={styles.contentItemTopCoverImg} />
  202. <View style={styles.contentItemTopDetail}>
  203. <Text style={styles.contentItemTopDetailTitle}>{this.state.contentItem1.target.title}</Text>
  204. <Text style={styles.contentItemTopDetailRemark}>{this.state.contentItem1.target.remark}</Text>
  205. <View style={styles.contentItemTopDetailPrice}>
  206. <View style={styles.contentItemTopDetailCurPrice}>
  207. <Text style={styles.contentItemTopDetailCurPriceStr}>{this.state.contentItem1.target.priceStr}</Text>
  208. <Text style={styles.contentItemTopDetailCurPriceStrUnit}>元</Text>
  209. </View>
  210. <View style={styles.contentItemTopDetailSalePrice}>
  211. <Text style={styles.contentItemTopDetailSalePriceStr} >{this.state.contentItem1.target.salePriceStr}元</Text>
  212. </View>
  213. </View>
  214. </View>
  215. <Image source={{uri:'data:image/png;base64,'+this.state.contentItem1.qrcode}} resizeMode='contain' style={styles.contentItemTopQrcode} />
  216. </View>
  217. <View style={styles.contentItemBottom}>
  218. <Text style={styles.contentItemBottomMerchantName}>肯德基</Text>
  219. <View style={styles.contentItemBottomPlacehold}></View>
  220. <Text style={styles.contentItemBottomAction}>扫码领取</Text>
  221. </View>
  222. </ImageBackground>
  223. <Image source={require('./image/discount.png')} resizeMode='center' style={styles.contentItemUpLayer} />
  224. </Animatable.View>
  225. </View>)
  226. }else{
  227. var content = <View style={styles.content}></View>
  228. }
  229. return (
  230. <ImageBackground style={styles.background} resizeMode='center' source={require('./image/background.png')}>
  231. <View style={styles.title}>
  232. <View style={styles.titleImagePlace}>
  233. <Image source={require('./image/title.png')} resizeMode='center' style={styles.titleImage} />
  234. </View>
  235. <ImageBackground source={require('./image/title-qrcode.png')} resizeMode='center' style={styles.titleQrcodeBonder} >
  236. <View style={styles.titleQrcodePlacehold}></View>
  237. <Image source={{uri: this.state.baseInfo.imgQrcodeWeapp}} resizeMode='center' style={styles.titleQrcode} />
  238. <View style={styles.titleQrcodePlacehold}></View>
  239. </ImageBackground>
  240. </View>
  241. {content}
  242. <View style={styles.bottom}>
  243. <View style={styles.bottomLogoBackground}>
  244. <Image source={{ uri: this.state.baseInfo.imgUrlH, cache: 'force-cache'}} resizeMode='center' style={styles.bottomLogo} />
  245. </View>
  246. <Image source={{ uri: this.state.baseInfo.imgQrcodeWeapp, cache: 'force-cache'}} resizeMode='center' style={styles.bottomQrcode1} />
  247. <Image source={{ uri: this.state.baseInfo.imgQrcodeWeapp, cache: 'force-cache'}} resizeMode='center' style={styles.bottomQrcode2} />
  248. <Text style={styles.bottomPlacehold}>{this.state.versionInfo}</Text>
  249. </View>
  250. </ImageBackground>
  251. );
  252. }
  253. }
  254. const styles = StyleSheet.create({
  255. updatePage:{
  256. flex: 2,
  257. width:'100%',
  258. height:'100%',
  259. backgroundColor:'yellow',
  260. textAlign :'center',
  261. textAlignVertical:'center',
  262. fontSize: 24,
  263. color: 'green'
  264. },
  265. //layer background
  266. background:{
  267. flex: 1,
  268. width:'100%',
  269. height:'100%'
  270. },
  271. //layer top
  272. title:{
  273. flex: 6,
  274. flexDirection: 'row',
  275. alignItems: 'center',
  276. paddingLeft:16,
  277. paddingRight:16,
  278. backgroundColor:'transparent'
  279. },
  280. content:{
  281. flex: 18,
  282. flexDirection: 'column',
  283. alignItems: 'center',
  284. backgroundColor:'transparent'
  285. },
  286. bottom:{
  287. flex: 2,
  288. flexDirection: 'row',
  289. alignItems: 'center',
  290. paddingLeft:16,
  291. paddingRight:16,
  292. backgroundColor:'transparent'
  293. },
  294. //layer title
  295. titleImagePlace: {
  296. flex: 2,
  297. paddingTop: '20%',
  298. paddingLeft: '15%',
  299. alignItems: 'center',
  300. backgroundColor:'transparent'
  301. },
  302. titleImage: {
  303. width:'100%',
  304. height:'100%',
  305. flex: 1,
  306. backgroundColor:'transparent'
  307. },
  308. titleQrcodeBonder: {
  309. width:'100%',
  310. height:'100%',
  311. alignItems: 'center',
  312. flexDirection: 'column',
  313. flex: 1,
  314. backgroundColor:'transparent'
  315. },
  316. titleQrcodePlacehold: {
  317. flex: 5,
  318. backgroundColor:'transparent'
  319. },
  320. titleQrcode: {
  321. flex: 6,
  322. width:'100%',
  323. height:'100%',
  324. backgroundColor:'transparent'
  325. },
  326. //layer bottom
  327. bottomLogoBackground: {
  328. flex: 3,
  329. borderRadius:10,
  330. marginTop: 12,
  331. marginBottom: 12,
  332. backgroundColor:'white'
  333. },
  334. bottomLogo: {
  335. width:'100%',
  336. height:'100%',
  337. borderRadius:10,
  338. backgroundColor:'transparent'
  339. },
  340. bottomQrcode1: {
  341. flex: 1,
  342. width:'100%',
  343. height:'100%',
  344. marginLeft: 8,
  345. backgroundColor:'transparent'
  346. },
  347. bottomQrcode2: {
  348. flex: 1,
  349. width:'100%',
  350. height:'100%',
  351. marginLeft: 8,
  352. backgroundColor:'transparent'
  353. },
  354. bottomPlacehold: {
  355. flex: 8,
  356. width:'100%',
  357. height:'100%',
  358. backgroundColor:'transparent',
  359. textAlign :'right',
  360. textAlignVertical:'bottom',
  361. fontSize: 10,
  362. color : 'gray'
  363. },
  364. //layer content item
  365. contentItem:{
  366. flex: 1,
  367. width:'100%',
  368. height:'100%',
  369. flexDirection: 'column',
  370. backgroundColor:'transparent'
  371. },
  372. contentItemDownLayer:{
  373. position:'absolute',
  374. width:'100%',
  375. height:'100%',
  376. flexDirection: 'column',
  377. alignItems: 'center',
  378. backgroundColor:'transparent'
  379. },
  380. contentItemUpLayer:{
  381. width:80,
  382. height:60,
  383. position:'absolute',
  384. backgroundColor:'transparent'
  385. },
  386. contentItemTop:{
  387. flex: 3,
  388. width:'100%',
  389. height:'100%',
  390. paddingLeft: 25,
  391. paddingRight: 20,
  392. paddingTop: 15,
  393. flexDirection: 'row',
  394. alignItems: 'center',
  395. backgroundColor:'transparent'
  396. },
  397. contentItemBottom:{
  398. flex: 1,
  399. width:'100%',
  400. height:'100%',
  401. paddingLeft: 25,
  402. paddingRight: 20,
  403. paddingBottom: 15,
  404. flexDirection: 'row',
  405. alignItems: 'center',
  406. backgroundColor:'transparent'
  407. },
  408. //layer content item top
  409. contentItemTopCoverImg:{
  410. flex: 5,
  411. width:'100%',
  412. height:'100%',
  413. borderRadius:10,
  414. backgroundColor:'transparent'
  415. },
  416. contentItemTopDetail:{
  417. flex: 6,
  418. width:'100%',
  419. height:'100%',
  420. paddingLeft: 10,
  421. paddingRight: 30,
  422. alignItems: 'center',
  423. backgroundColor:'transparent'
  424. },
  425. contentItemTopQrcode:{
  426. flex: 5,
  427. width:'100%',
  428. height:'100%',
  429. backgroundColor:'transparent'
  430. },
  431. //layer content item bottom
  432. contentItemBottomMerchantName:{
  433. flex: 5,
  434. width:'100%',
  435. height:'100%',
  436. alignItems: 'center',
  437. backgroundColor:'transparent',
  438. textAlign :'center',
  439. textAlignVertical:'center',
  440. fontSize: 10,
  441. fontWeight : 'bold'
  442. },
  443. contentItemBottomPlacehold:{
  444. flex: 6,
  445. paddingLeft: 10,
  446. paddingRight: 30,
  447. width:'100%',
  448. height:'100%',
  449. backgroundColor:'transparent',
  450. },
  451. contentItemBottomAction:{
  452. flex: 5,
  453. width:'100%',
  454. height:'100%',
  455. backgroundColor:'transparent',
  456. fontWeight : 'bold',
  457. textAlign :'center',
  458. textAlignVertical:'center',
  459. },
  460. //layer content item top detail
  461. contentItemTopDetailTitle:{
  462. flex: 2,
  463. width:'100%',
  464. height:'100%',
  465. backgroundColor:'transparent',
  466. textAlign :'left',
  467. textAlignVertical:'center',
  468. fontSize: 24,
  469. color: 'darkgray'
  470. },
  471. contentItemTopDetailRemark:{
  472. flex: 1,
  473. width:'100%',
  474. height:'100%',
  475. backgroundColor:'transparent',
  476. textAlign :'left',
  477. textAlignVertical:'center',
  478. fontSize: 10,
  479. color : 'gray'
  480. },
  481. contentItemTopDetailPrice:{
  482. flex: 2,
  483. width:'100%',
  484. height:'100%',
  485. backgroundColor:'transparent',
  486. flexDirection: 'row',
  487. },
  488. contentItemTopDetailCurPrice:{
  489. flex: 3,
  490. width:'100%',
  491. height:'100%',
  492. flexDirection: 'row',
  493. backgroundColor:'transparent',
  494. },
  495. contentItemTopDetailCurPriceStr:{
  496. backgroundColor:'transparent',
  497. textAlign :'left',
  498. textAlignVertical:'bottom',
  499. fontSize: 32,
  500. color : 'red'
  501. },
  502. contentItemTopDetailCurPriceStrUnit:{
  503. backgroundColor:'transparent',
  504. textAlign :'left',
  505. textAlignVertical:'bottom',
  506. fontSize: 10,
  507. color : 'red'
  508. },
  509. contentItemTopDetailSalePrice:{
  510. flex: 1,
  511. width:'100%',
  512. height:'100%',
  513. backgroundColor:'transparent',
  514. },
  515. contentItemTopDetailSalePriceStr:{
  516. width:'100%',
  517. height:'100%',
  518. backgroundColor:'transparent',
  519. textAlign :'left',
  520. textAlignVertical:'bottom',
  521. fontSize: 10,
  522. textDecorationLine: 'line-through',
  523. color : 'gray'
  524. },
  525. });