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

297 行
7.7 KiB

  1. import React, { Component } from 'react';
  2. import {
  3. Platform,
  4. StyleSheet,
  5. Text,
  6. View,
  7. Image,
  8. Dimensions,
  9. TouchableOpacity,
  10. ImageBackground,
  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. // 取得屏幕的宽高Dimensions
  18. const { width, height } = Dimensions.get('window');
  19. export default class MyPage extends Component {
  20. constructor(props) {
  21. super(props);
  22. this.state = {
  23. baseInfo: {
  24. imgUrl:'',
  25. imgQrcodeWeapp:'',
  26. imgQrcodeWemp:''
  27. },
  28. adData:[],
  29. text:'',
  30. qrcode:[],
  31. restartAllowed: true ,
  32. syncMessage: "syncMessage" ,
  33. progress: false,
  34. macAddress: "NULL"
  35. };
  36. DeviceInfo.getMACAddress().then(mac=>{this.setState({macAddress:mac})})
  37. DeviceInfo.getIPAddress().then(mac=>{this.setState({macAddress:mac})})
  38. }
  39. // 监听更新状态
  40. codePushStatusDidChange(syncStatus) {
  41. switch(syncStatus) {
  42. case CodePush.SyncStatus.CHECKING_FOR_UPDATE:
  43. this.setState({ syncMessage: "Checking for update." });
  44. break;
  45. case CodePush.SyncStatus.DOWNLOADING_PACKAGE:
  46. this.setState({ syncMessage: "Downloading package." });
  47. break;
  48. case CodePush.SyncStatus.AWAITING_USER_ACTION:
  49. this.setState({ syncMessage: "Awaiting user action." });
  50. break;
  51. case CodePush.SyncStatus.INSTALLING_UPDATE:
  52. this.setState({ syncMessage: "Installing update." });
  53. break;
  54. case CodePush.SyncStatus.UP_TO_DATE:
  55. this.setState({ syncMessage: "App up to date.", progress: false });
  56. break;
  57. case CodePush.SyncStatus.UPDATE_IGNORED:
  58. this.setState({ syncMessage: "Update cancelled by user.", progress: false });
  59. break;
  60. case CodePush.SyncStatus.UPDATE_INSTALLED:
  61. this.setState({ syncMessage: "Update installed and will be applied on restart.", progress: false });
  62. break;
  63. case CodePush.SyncStatus.UNKNOWN_ERROR:
  64. this.setState({ syncMessage: "An unknown error occurred.", progress: false });
  65. break;
  66. }
  67. }
  68. codePushDownloadDidProgress(progress) {
  69. this.setState({ progress });
  70. }
  71. // 允许重启后更新
  72. toggleAllowRestart() {
  73. this.state.restartAllowed
  74. ? CodePush.disallowRestart()
  75. : CodePush.allowRestart();
  76. this.setState({ restartAllowed: !this.state.restartAllowed });
  77. }
  78. // 获取更新数据
  79. getUpdateMetadata() {
  80. CodePush.getUpdateMetadata(CodePush.UpdateState.RUNNING)
  81. .then((metadata: LocalPackage) => {
  82. this.setState({ syncMessage: metadata ? JSON.stringify(metadata) : "Running binary version", progress: false });
  83. }, (error: any) => {
  84. this.setState({ syncMessage: "Error: " + error, progress: false });
  85. });
  86. }
  87. /** Update is downloaded silently, and applied on restart (recommended) 自动更新,一键操作 */
  88. sync() {
  89. CodePush.sync(
  90. {},
  91. this.codePushStatusDidChange.bind(this),
  92. this.codePushDownloadDidProgress.bind(this)
  93. );
  94. }
  95. /** Update pops a confirmation dialog, and then immediately reboots the app 一键更新,加入的配置项 */
  96. syncImmediate() {
  97. CodePush.sync(
  98. { installMode: CodePush.InstallMode.IMMEDIATE, updateDialog: true },
  99. this.codePushStatusDidChange.bind(this),
  100. this.codePushDownloadDidProgress.bind(this)
  101. );
  102. }
  103. getTestData() {
  104. HttpUtils.get('https://mall.youlane.cn/api/wxDeviceScreenAd/list?deviceId=11%3AAA%3A33%3ABB%3A44&pageNum=1&pageSize=5')
  105. .then(result => {
  106. this.setState({
  107. adData: result.data.list});
  108. })
  109. .catch(error => console.error(error))
  110. }
  111. getBaseInfo() {
  112. HttpUtils.get('https://mall.youlane.cn/api/wxDeviceScreenAd/info?deviceId=11%3AAA%3A33%3ABB%3A44')
  113. .then(result => {
  114. this.setState({
  115. baseInfo:result.data});
  116. })
  117. .catch(error => console.error(error))
  118. }
  119. componentDidMount() {
  120. this.getBaseInfo()
  121. }
  122. render() {
  123. let progressView;
  124. if (this.state.progress) {
  125. progressView = (
  126. <Text>{this.state.progress.receivedBytes} of {this.state.progress.totalBytes} bytes received</Text>
  127. );
  128. }
  129. return (
  130. <ImageBackground style={styles.container}
  131. source={require('./image/background.png')}>
  132. <View style={styles.title}>
  133. <View style={styles.titleImagePlace}>
  134. <Image source={require('./image/title.png')} resizeMode='center' style={styles.titleImage} />
  135. </View>
  136. <ImageBackground source={require('./image/title-qrcode.png')} resizeMode='center' style={styles.titleQrcodeBonder} >
  137. <Image source={{uri: this.state.baseInfo.imgQrcodeWeapp}} resizeMode='center' style={styles.titleQrcode} />
  138. </ImageBackground>
  139. </View>
  140. <View style={styles.content}>
  141. <Image source={require('./image/item-background.png')} resizeMode='center' style={styles.contentItem} />
  142. <Image source={require('./image/item-background.png')} resizeMode='center' style={styles.contentItem} />
  143. <Image source={require('./image/item-background.png')} resizeMode='center' style={styles.contentItem} />
  144. </View>
  145. <View style={styles.bottom}>
  146. <Image source={{ uri: this.state.baseInfo.imgUrl, cache: 'force-cache'}} resizeMode='center' style={styles.bottomLogo} />
  147. <Image source={{ uri: 'http://hangge.com/img.png',cache: 'force-cache'}} resizeMode='center' style={styles.bottomQrcode1} />
  148. <Image source={{ uri: 'http://hangge.com/img.png',cache: 'force-cache'}} resizeMode='center' style={styles.bottomQrcode2} />
  149. <Text style={styles.bottomPlacehold}>{this.state.text}</Text>
  150. </View>
  151. </ImageBackground>
  152. );
  153. }
  154. }
  155. const styles = StyleSheet.create({
  156. //layer background
  157. container:{
  158. flex: 1,
  159. paddingLeft: 16,
  160. paddingRight: 16
  161. },
  162. //layer top
  163. title:{
  164. flex: 6,
  165. flexDirection: 'row',
  166. alignItems: 'center',
  167. backgroundColor:'transparent'
  168. },
  169. content:{
  170. flex: 18,
  171. flexDirection: 'column',
  172. alignItems: 'center',
  173. backgroundColor:'transparent'
  174. },
  175. bottom:{
  176. flex: 2,
  177. flexDirection: 'row',
  178. alignItems: 'center',
  179. backgroundColor:'transparent'
  180. },
  181. //layer title
  182. titleImagePlace: {
  183. flex: 2,
  184. paddingTop: '20%',
  185. paddingLeft: '10%',
  186. alignItems: 'center',
  187. backgroundColor:'transparent'
  188. },
  189. titleImage: {
  190. width:'100%',
  191. height:'100%',
  192. flex: 1,
  193. backgroundColor:'transparent'
  194. },
  195. titleQrcodeBonder: {
  196. width:'100%',
  197. height:'100%',
  198. flex: 1,
  199. backgroundColor:'transparent'
  200. },
  201. titleQrcode: {
  202. margin: '20%',
  203. marginTop: '40%',
  204. marginBottom: '2%',
  205. width:'60%',
  206. height:'30%',
  207. backgroundColor:'transparent'
  208. },
  209. //layer bottom
  210. bottomLogo: {
  211. flex: 50,
  212. width:'100%',
  213. height:'100%',
  214. backgroundColor:'transparent'
  215. },
  216. bottomQrcode1: {
  217. flex: 30,
  218. width:'100%',
  219. height:'100%',
  220. backgroundColor:'transparent'
  221. },
  222. bottomQrcode2: {
  223. flex: 30,
  224. width:'100%',
  225. height:'100%',
  226. backgroundColor:'transparent'
  227. },
  228. bottomPlacehold: {
  229. flex: 180,
  230. width:'100%',
  231. height:'100%',
  232. backgroundColor:'transparent'
  233. },
  234. //layer content item
  235. contentItem:{
  236. flex: 1,
  237. flexDirection: 'column',
  238. alignItems: 'center',
  239. backgroundColor:'transparent'
  240. },
  241. });