广告屏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.
 
 
 
 
 

269 lines
7.5 KiB

  1. import React, { Component } from 'react';
  2. import {
  3. Platform,
  4. StyleSheet,
  5. Text,
  6. View,
  7. Image,
  8. Dimensions,
  9. TouchableOpacity,
  10. } from 'react-native';
  11. //引用插件
  12. import Package from './package.json'
  13. import Swiper from 'react-native-swiper';
  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. swiperShow: false,
  24. text:'',
  25. qrcode:[],
  26. restartAllowed: true ,
  27. syncMessage: "我是小更新" ,
  28. progress: false,
  29. macAddress: "NULL"
  30. };
  31. DeviceInfo.getMACAddress().then(mac=>{this.setState({macAddress:mac})})
  32. DeviceInfo.getIPAddress().then(mac=>{this.setState({macAddress:mac})})
  33. }
  34. // 监听更新状态
  35. codePushStatusDidChange(syncStatus) {
  36. switch(syncStatus) {
  37. case CodePush.SyncStatus.CHECKING_FOR_UPDATE:
  38. this.setState({ syncMessage: "Checking for update." });
  39. break;
  40. case CodePush.SyncStatus.DOWNLOADING_PACKAGE:
  41. this.setState({ syncMessage: "Downloading package." });
  42. break;
  43. case CodePush.SyncStatus.AWAITING_USER_ACTION:
  44. this.setState({ syncMessage: "Awaiting user action." });
  45. break;
  46. case CodePush.SyncStatus.INSTALLING_UPDATE:
  47. this.setState({ syncMessage: "Installing update." });
  48. break;
  49. case CodePush.SyncStatus.UP_TO_DATE:
  50. this.setState({ syncMessage: "App up to date.", progress: false });
  51. break;
  52. case CodePush.SyncStatus.UPDATE_IGNORED:
  53. this.setState({ syncMessage: "Update cancelled by user.", progress: false });
  54. break;
  55. case CodePush.SyncStatus.UPDATE_INSTALLED:
  56. this.setState({ syncMessage: "Update installed and will be applied on restart.", progress: false });
  57. break;
  58. case CodePush.SyncStatus.UNKNOWN_ERROR:
  59. this.setState({ syncMessage: "An unknown error occurred.", progress: false });
  60. break;
  61. }
  62. }
  63. codePushDownloadDidProgress(progress) {
  64. this.setState({ progress });
  65. }
  66. // 允许重启后更新
  67. toggleAllowRestart() {
  68. this.state.restartAllowed
  69. ? CodePush.disallowRestart()
  70. : CodePush.allowRestart();
  71. this.setState({ restartAllowed: !this.state.restartAllowed });
  72. }
  73. // 获取更新数据
  74. getUpdateMetadata() {
  75. CodePush.getUpdateMetadata(CodePush.UpdateState.RUNNING)
  76. .then((metadata: LocalPackage) => {
  77. this.setState({ syncMessage: metadata ? JSON.stringify(metadata) : "Running binary version", progress: false });
  78. }, (error: any) => {
  79. this.setState({ syncMessage: "Error: " + error, progress: false });
  80. });
  81. }
  82. /** Update is downloaded silently, and applied on restart (recommended) 自动更新,一键操作 */
  83. sync() {
  84. CodePush.sync(
  85. {},
  86. this.codePushStatusDidChange.bind(this),
  87. this.codePushDownloadDidProgress.bind(this)
  88. );
  89. }
  90. /** Update pops a confirmation dialog, and then immediately reboots the app 一键更新,加入的配置项 */
  91. syncImmediate() {
  92. CodePush.sync(
  93. { installMode: CodePush.InstallMode.IMMEDIATE, updateDialog: true },
  94. this.codePushStatusDidChange.bind(this),
  95. this.codePushDownloadDidProgress.bind(this)
  96. );
  97. }
  98. // 轮播图
  99. renderBanner() {
  100. if (this.state.swiperShow) {
  101. console.log ('返回值' + this.state.swiperShow);
  102. return (
  103. <Swiper
  104. style={styles.wrapper}
  105. showsButtons={false}
  106. removeClippedSubviews={false} //这个很主要啊,解决白屏问题
  107. autoplay={true}
  108. horizontal ={true}
  109. paginationStyle={styles.paginationStyle}
  110. dotStyle={styles.dotStyle}
  111. activeDotStyle={styles.activeDotStyle}
  112. >
  113. <Image source={require('./image/page1.jpg')} resizeMode='stretch' style={styles.bannerImg}/>
  114. <Image source={require('./image/page2.jpg')} resizeMode='stretch' style={styles.bannerImg}/>
  115. <Image source={require('./image/page3.jpg')} resizeMode='stretch' style={styles.bannerImg}/>
  116. <Image source={require('./image/page4.jpg')} resizeMode='stretch' style={styles.bannerImg}/>
  117. </Swiper>
  118. );
  119. } else {
  120. return (
  121. <View style={styles.wrapper}>
  122. <Image style={{width: 300, height: 300}} source={{uri:'data:image/jpeg;base64,'+ this.state.qrcode}}/>
  123. <Text style={{marginTop: 16}}>{this.state.text}</Text>
  124. </View>
  125. );
  126. }
  127. }
  128. get() {
  129. HttpUtils.get('https://mall.youlane.cn/api/wxDeviceScreenAd/list?deviceId=11%3AAA%3A33%3ABB%3A44&pageNum=1&pageSize=5')
  130. .then(result => {
  131. this.setState({
  132. text: JSON.stringify,
  133. qrcode: result.data.list[0].qrcode});
  134. })
  135. .catch(error => console.error(error))
  136. }
  137. componentDidMount() {
  138. this.get()
  139. setTimeout(() => {
  140. this.setState({
  141. swiperShow: true,
  142. });
  143. }, 10000)
  144. }
  145. render() {
  146. let progressView;
  147. if (this.state.progress) {
  148. progressView = (
  149. <Text style={styles.messages}>{this.state.progress.receivedBytes} of {this.state.progress.totalBytes} bytes received</Text>
  150. );
  151. }
  152. return (
  153. <View style={styles.container}>
  154. <Text style={styles.welcome}>
  155. 当前版本是:{Package.version}
  156. </Text>
  157. <Text style={styles.messages}>
  158. Mac:{this.state.macAddress}
  159. </Text>
  160. <Text style={styles.messages}>
  161. Name:{DeviceInfo.getApplicationName()}
  162. </Text>
  163. <TouchableOpacity onPress={this.sync.bind(this)}>
  164. <Text style={styles.syncButton}>Press for background sync</Text>
  165. </TouchableOpacity>
  166. <TouchableOpacity onPress={this.syncImmediate.bind(this)}>
  167. <Text style={styles.syncButton}>Press for dialog-driven sync</Text>
  168. </TouchableOpacity>
  169. {progressView}
  170. <TouchableOpacity onPress={this.toggleAllowRestart.bind(this)}>
  171. <Text style={styles.restartToggleButton}>Restart { this.state.restartAllowed ? "allowed" : "forbidden"}</Text>
  172. </TouchableOpacity>
  173. <TouchableOpacity onPress={this.getUpdateMetadata.bind(this)}>
  174. <Text style={styles.syncButton}>Press for Update Metadata</Text>
  175. </TouchableOpacity>
  176. <Text style={styles.messages}>{this.state.syncMessage || ""}</Text>
  177. </View>
  178. );
  179. /*
  180. return (
  181. <View style={styles.container}>
  182. {this.renderBanner()}
  183. </View>
  184. );
  185. */
  186. }
  187. }
  188. const styles = StyleSheet.create({
  189. container: {
  190. width:width,
  191. height:height,
  192. flex:1
  193. },
  194. wrapper: {
  195. width:width,
  196. height:height,
  197. flex:1
  198. },
  199. bannerImg: {
  200. width:width,
  201. height:height,
  202. flex:1
  203. },
  204. container: {
  205. flex: 1,
  206. alignItems: "center",
  207. backgroundColor: "#F5FCFF",
  208. paddingTop: 50
  209. },
  210. image: {
  211. margin: 30,
  212. width: Dimensions.get("window").width - 100,
  213. height: 365 * (Dimensions.get("window").width - 100) / 651,
  214. },
  215. messages: {
  216. marginTop: 30,
  217. textAlign: "center",
  218. },
  219. restartToggleButton: {
  220. color: "blue",
  221. fontSize: 17
  222. },
  223. syncButton: {
  224. color: "green",
  225. fontSize: 17
  226. },
  227. welcome: {
  228. fontSize: 20,
  229. textAlign: "center",
  230. margin: 20
  231. },
  232. });