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

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