广告屏react-native项目
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 
 
 

224 lines
6.4 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. text:'',
  24. qrcode:[],
  25. restartAllowed: true ,
  26. syncMessage: "syncMessage" ,
  27. progress: false,
  28. macAddress: "NULL"
  29. };
  30. DeviceInfo.getMACAddress().then(mac=>{this.setState({macAddress:mac})})
  31. DeviceInfo.getIPAddress().then(mac=>{this.setState({macAddress:mac})})
  32. }
  33. // 监听更新状态
  34. codePushStatusDidChange(syncStatus) {
  35. switch(syncStatus) {
  36. case CodePush.SyncStatus.CHECKING_FOR_UPDATE:
  37. this.setState({ syncMessage: "Checking for update." });
  38. break;
  39. case CodePush.SyncStatus.DOWNLOADING_PACKAGE:
  40. this.setState({ syncMessage: "Downloading package." });
  41. break;
  42. case CodePush.SyncStatus.AWAITING_USER_ACTION:
  43. this.setState({ syncMessage: "Awaiting user action." });
  44. break;
  45. case CodePush.SyncStatus.INSTALLING_UPDATE:
  46. this.setState({ syncMessage: "Installing update." });
  47. break;
  48. case CodePush.SyncStatus.UP_TO_DATE:
  49. this.setState({ syncMessage: "App up to date.", progress: false });
  50. break;
  51. case CodePush.SyncStatus.UPDATE_IGNORED:
  52. this.setState({ syncMessage: "Update cancelled by user.", progress: false });
  53. break;
  54. case CodePush.SyncStatus.UPDATE_INSTALLED:
  55. this.setState({ syncMessage: "Update installed and will be applied on restart.", progress: false });
  56. break;
  57. case CodePush.SyncStatus.UNKNOWN_ERROR:
  58. this.setState({ syncMessage: "An unknown error occurred.", progress: false });
  59. break;
  60. }
  61. }
  62. codePushDownloadDidProgress(progress) {
  63. this.setState({ progress });
  64. }
  65. // 允许重启后更新
  66. toggleAllowRestart() {
  67. this.state.restartAllowed
  68. ? CodePush.disallowRestart()
  69. : CodePush.allowRestart();
  70. this.setState({ restartAllowed: !this.state.restartAllowed });
  71. }
  72. // 获取更新数据
  73. getUpdateMetadata() {
  74. CodePush.getUpdateMetadata(CodePush.UpdateState.RUNNING)
  75. .then((metadata: LocalPackage) => {
  76. this.setState({ syncMessage: metadata ? JSON.stringify(metadata) : "Running binary version", progress: false });
  77. }, (error: any) => {
  78. this.setState({ syncMessage: "Error: " + error, progress: false });
  79. });
  80. }
  81. /** Update is downloaded silently, and applied on restart (recommended) 自动更新,一键操作 */
  82. sync() {
  83. CodePush.sync(
  84. {},
  85. this.codePushStatusDidChange.bind(this),
  86. this.codePushDownloadDidProgress.bind(this)
  87. );
  88. }
  89. /** Update pops a confirmation dialog, and then immediately reboots the app 一键更新,加入的配置项 */
  90. syncImmediate() {
  91. CodePush.sync(
  92. { installMode: CodePush.InstallMode.IMMEDIATE, updateDialog: true },
  93. this.codePushStatusDidChange.bind(this),
  94. this.codePushDownloadDidProgress.bind(this)
  95. );
  96. }
  97. getBaseInfo() {
  98. HttpUtils.get('https://mall.youlane.cn/api/wxDeviceScreenAd/list?deviceId=11%3AAA%3A33%3ABB%3A44&pageNum=1&pageSize=5')
  99. .then(result => {
  100. this.setState({
  101. text: JSON.stringify,
  102. qrcode: result.data.list[0].qrcode});
  103. })
  104. .catch(error => console.error(error))
  105. }
  106. componentDidMount() {
  107. this.getBaseInfo()
  108. }
  109. render() {
  110. let progressView;
  111. if (this.state.progress) {
  112. progressView = (
  113. <Text>{this.state.progress.receivedBytes} of {this.state.progress.totalBytes} bytes received</Text>
  114. );
  115. }
  116. return (
  117. <ImageBackground style={styles.container}
  118. source={require('./image/background.png')}>
  119. <View style={styles.title}>
  120. <View style={styles.titleImagePlace}>
  121. <Image source={require('./image/title.png')} resizeMode='center' style={styles.titleImage} />
  122. </View>
  123. <Image source={require('./image/title-qrcode.png')} resizeMode='center' style={styles.titleQrcode} />
  124. </View>
  125. <View style={styles.content}>
  126. <Image source={require('./image/item-background.png')} resizeMode='center' style={styles.titleImage} />
  127. <Image source={require('./image/item-background.png')} resizeMode='center' style={styles.titleImage} />
  128. <Image source={require('./image/item-background.png')} resizeMode='center' style={styles.titleImage} />
  129. </View>
  130. <View style={styles.bottom}>
  131. <Image source={require('./image/logo.png')} resizeMode='center' style={styles.bottomLogo} />
  132. <Image source={require('./image/test-l.png')} resizeMode='center' style={styles.bottomQrcode1} />
  133. <Image source={require('./image/test-l.png')} resizeMode='center' style={styles.bottomQrcode2} />
  134. <Text style={styles.bottomPlacehold}></Text>
  135. </View>
  136. </ImageBackground>
  137. );
  138. }
  139. }
  140. const styles = StyleSheet.create({
  141. container:{
  142. flex: 1,
  143. paddingLeft: 16,
  144. paddingRight: 16
  145. },
  146. title:{
  147. flex: 6,
  148. flexDirection: 'row',
  149. alignItems: 'center',
  150. backgroundColor:'transparent'
  151. },
  152. content:{
  153. flex: 18,
  154. flexDirection: 'column',
  155. alignItems: 'center',
  156. backgroundColor:'transparent'
  157. },
  158. bottom:{
  159. flex: 2,
  160. flexDirection: 'row',
  161. alignItems: 'center',
  162. backgroundColor:'transparent'
  163. },
  164. titleImagePlace: {
  165. flex: 2,
  166. alignItems: 'center',
  167. backgroundColor:'transparent'
  168. },
  169. titleImage: {
  170. flex: 1,
  171. alignItems:'center',
  172. backgroundColor:'transparent'
  173. },
  174. titleQrcode: {
  175. flex: 1,
  176. backgroundColor:'transparent'
  177. },
  178. bottomLogo: {
  179. flex: 2,
  180. alignItems: 'center',
  181. backgroundColor:'transparent'
  182. },
  183. bottomQrcode1: {
  184. flex: 1,
  185. alignItems: 'center',
  186. backgroundColor:'transparent'
  187. },
  188. bottomQrcode2: {
  189. flex: 1,
  190. alignItems: 'center',
  191. backgroundColor:'transparent'
  192. },
  193. bottomPlacehold: {
  194. flex: 6,
  195. alignItems: 'center',
  196. backgroundColor:'transparent'
  197. }
  198. });