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

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