广告屏react-native项目
25개 이상의 토픽을 선택하실 수 없습니다. Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 
 
 

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