广告屏react-native项目
Du kannst nicht mehr als 25 Themen auswählen Themen müssen entweder mit einem Buchstaben oder einer Ziffer beginnen. Sie können Bindestriche („-“) enthalten und bis zu 35 Zeichen lang sein.
 
 
 
 
 

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