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

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