Переглянути джерело

[页面][修改]:修改首页样式

tags/jenkins-front-end-screenad-53
hupeng 6 роки тому
джерело
коміт
59645eab08
13 змінених файлів з 107 додано та 132 видалено
  1. +81
    -126
      App.js
  2. +21
    -0
      android/app/src/main/java/com/screenad/MainActivity.java
  3. +5
    -6
      android/app/src/main/java/com/screenad/MainApplication.java
  4. BIN
      image/background.png
  5. BIN
      image/item-background.png
  6. BIN
      image/logo.png
  7. BIN
      image/page1.jpg
  8. BIN
      image/page2.jpg
  9. BIN
      image/page3.jpg
  10. BIN
      image/page4.jpg
  11. BIN
      image/test-l.png
  12. BIN
      image/title-qrcode.png
  13. BIN
      image/title.png

+ 81
- 126
App.js Переглянути файл

@@ -8,11 +8,11 @@ import React, { Component } from 'react';
Image,
Dimensions,
TouchableOpacity,
ImageBackground,
} from 'react-native';

//引用插件
import Package from './package.json'
import Swiper from 'react-native-swiper';
import HttpUtils from './HttpUtils.js';
import CodePush from "react-native-code-push";
import DeviceInfo from "react-native-device-info";
@@ -25,11 +25,10 @@ export default class MyPage extends Component {
constructor(props) {
super(props);
this.state = {
swiperShow: false,
text:'',
qrcode:[],
restartAllowed: true ,
syncMessage: "我是小更新" ,
syncMessage: "syncMessage" ,
progress: false,
macAddress: "NULL"
};
@@ -109,39 +108,8 @@ codePushStatusDidChange(syncStatus) {
);
}

// 轮播图
renderBanner() {
if (this.state.swiperShow) {
console.log ('返回值' + this.state.swiperShow);
return (
<Swiper
style={styles.wrapper}
showsButtons={false}
removeClippedSubviews={false} //这个很主要啊,解决白屏问题
autoplay={true}
horizontal ={true}
paginationStyle={styles.paginationStyle}
dotStyle={styles.dotStyle}
activeDotStyle={styles.activeDotStyle}
>
<Image source={require('./image/page1.jpg')} resizeMode='stretch' style={styles.bannerImg}/>
<Image source={require('./image/page2.jpg')} resizeMode='stretch' style={styles.bannerImg}/>
<Image source={require('./image/page3.jpg')} resizeMode='stretch' style={styles.bannerImg}/>
<Image source={require('./image/page4.jpg')} resizeMode='stretch' style={styles.bannerImg}/>
</Swiper>
);

} else {
return (
<View style={styles.wrapper}>
<Image style={{width: 300, height: 300}} source={{uri:'data:image/jpeg;base64,'+ this.state.qrcode}}/>
<Text style={{marginTop: 16}}>{this.state.text}</Text>
</View>
);
}
}

get() {
getBaseInfo() {
HttpUtils.get('https://mall.youlane.cn/api/wxDeviceScreenAd/list?deviceId=11%3AAA%3A33%3ABB%3A44&pageNum=1&pageSize=5')
.then(result => {
this.setState({
@@ -153,13 +121,7 @@ get() {


componentDidMount() {

this.get()
setTimeout(() => {
this.setState({
swiperShow: true,
});
}, 10000)
this.getBaseInfo()
}


@@ -168,101 +130,94 @@ render() {

if (this.state.progress) {
progressView = (
<Text style={styles.messages}>{this.state.progress.receivedBytes} of {this.state.progress.totalBytes} bytes received</Text>
<Text>{this.state.progress.receivedBytes} of {this.state.progress.totalBytes} bytes received</Text>
);
}

return (
<View style={styles.container}>

<Text style={styles.welcome}>
当前版本是:{Package.version}
</Text>

<Text style={styles.messages}>
Mac:{this.state.macAddress}
</Text>
<Text style={styles.messages}>
Name:{DeviceInfo.getApplicationName()}
</Text>
<TouchableOpacity onPress={this.sync.bind(this)}>
<Text style={styles.syncButton}>Press for background sync</Text>
</TouchableOpacity>

<TouchableOpacity onPress={this.syncImmediate.bind(this)}>
<Text style={styles.syncButton}>Press for dialog-driven sync</Text>
</TouchableOpacity>

{progressView}
<TouchableOpacity onPress={this.toggleAllowRestart.bind(this)}>
<Text style={styles.restartToggleButton}>Restart { this.state.restartAllowed ? "allowed" : "forbidden"}</Text>
</TouchableOpacity>

<TouchableOpacity onPress={this.getUpdateMetadata.bind(this)}>
<Text style={styles.syncButton}>Press for Update Metadata</Text>
</TouchableOpacity>

<Text style={styles.messages}>{this.state.syncMessage || ""}</Text>

</View>
<ImageBackground style={styles.container}
source={require('./image/background.png')}>

<View style={styles.title}>
<View style={styles.titleImagePlace}>
<Image source={require('./image/title.png')} resizeMode='center' style={styles.titleImage} />
</View>
<Image source={require('./image/title-qrcode.png')} resizeMode='center' style={styles.titleQrcode} />
</View>
<View style={styles.content}>
<Image source={require('./image/item-background.png')} resizeMode='center' style={styles.titleImage} />
<Image source={require('./image/item-background.png')} resizeMode='center' style={styles.titleImage} />
<Image source={require('./image/item-background.png')} resizeMode='center' style={styles.titleImage} />
</View>
<View style={styles.bottom}>
<Image source={require('./image/logo.png')} resizeMode='center' style={styles.bottomLogo} />
<Image source={require('./image/test-l.png')} resizeMode='center' style={styles.bottomQrcode1} />
<Image source={require('./image/test-l.png')} resizeMode='center' style={styles.bottomQrcode2} />
<Text style={styles.bottomPlacehold}></Text>
</View>
</ImageBackground>
);

/*
return (
<View style={styles.container}>
{this.renderBanner()}
</View>

);
*/
}
}

const styles = StyleSheet.create({
container: {
width:width,
height:height,
flex:1
container:{
flex: 1,
paddingLeft: 16,
paddingRight: 16
},
title:{
flex: 6,
flexDirection: 'row',
alignItems: 'center',
backgroundColor:'transparent'
},
content:{
flex: 18,
flexDirection: 'column',
alignItems: 'center',
backgroundColor:'transparent'
},
bottom:{
flex: 2,
flexDirection: 'row',
alignItems: 'center',
backgroundColor:'transparent'
},
titleImagePlace: {
flex: 2,
alignItems: 'center',
backgroundColor:'transparent'
},
wrapper: {
width:width,
height:height,
flex:1
titleImage: {
flex: 1,
alignItems:'center',
backgroundColor:'transparent'
},
bannerImg: {
width:width,
height:height,
flex:1
titleQrcode: {
flex: 1,
backgroundColor:'transparent'
},
container: {
flex: 1,
alignItems: "center",
backgroundColor: "#F5FCFF",
paddingTop: 50
},
image: {
margin: 30,
width: Dimensions.get("window").width - 100,
height: 365 * (Dimensions.get("window").width - 100) / 651,
},
messages: {
marginTop: 30,
textAlign: "center",
},
restartToggleButton: {
color: "blue",
fontSize: 17
},
syncButton: {
color: "green",
fontSize: 17
},
welcome: {
fontSize: 20,
textAlign: "center",
margin: 20
},
bottomLogo: {
flex: 2,
alignItems: 'center',
backgroundColor:'transparent'
},
bottomQrcode1: {
flex: 1,
alignItems: 'center',
backgroundColor:'transparent'
},
bottomQrcode2: {
flex: 1,
alignItems: 'center',
backgroundColor:'transparent'
},
bottomPlacehold: {
flex: 6,
alignItems: 'center',
backgroundColor:'transparent'
}

});

+ 21
- 0
android/app/src/main/java/com/screenad/MainActivity.java Переглянути файл

@@ -1,5 +1,10 @@
package com.screenad;

import android.graphics.Color;
import android.os.Build;
import android.os.Bundle;
import android.view.View;

import com.facebook.react.ReactActivity;

public class MainActivity extends ReactActivity {
@@ -8,6 +13,22 @@ public class MainActivity extends ReactActivity {
* Returns the name of the main component registered from JavaScript.
* This is used to schedule rendering of the component.
*/

protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);

View decorView = getWindow().getDecorView();
int option = View.SYSTEM_UI_FLAG_LAYOUT_HIDE_NAVIGATION
| View.SYSTEM_UI_FLAG_LAYOUT_FULLSCREEN
| View.SYSTEM_UI_FLAG_LAYOUT_STABLE
| View.SYSTEM_UI_FLAG_HIDE_NAVIGATION
| View.SYSTEM_UI_FLAG_FULLSCREEN;
decorView.setSystemUiVisibility(option);
getWindow().setNavigationBarColor(Color.TRANSPARENT);
getWindow().setStatusBarColor(Color.TRANSPARENT);

}

@Override
protected String getMainComponentName() {
return "screenAd";


+ 5
- 6
android/app/src/main/java/com/screenad/MainApplication.java Переглянути файл

@@ -18,10 +18,10 @@ public class MainApplication extends Application implements ReactApplication {

private final ReactNativeHost mReactNativeHost = new ReactNativeHost(this) {

@Override
protected String getJSBundleFile() {
return CodePush.getJSBundleFile();
}
@Override
protected String getJSBundleFile() {
return CodePush.getJSBundleFile();
}
@Override
public boolean getUseDeveloperSupport() {
@@ -33,8 +33,7 @@ public class MainApplication extends Application implements ReactApplication {
return Arrays.<ReactPackage>asList(
new MainReactPackage(),
new RNCameraPackage(),
new RNDeviceInfo(),
new CodePush(
new RNDeviceInfo(), new CodePush(
BuildConfig.CODEPUSH_KEY,
getApplicationContext(),
BuildConfig.DEBUG,


BIN
image/background.png Переглянути файл

Перед Після
Ширина: 1080  |  Висота: 1920  |  Розмір: 1.2 MiB

BIN
image/item-background.png Переглянути файл

Перед Після
Ширина: 1080  |  Висота: 428  |  Розмір: 28 KiB

BIN
image/logo.png Переглянути файл

Перед Після
Ширина: 88  |  Висота: 63  |  Розмір: 9.4 KiB

BIN
image/page1.jpg Переглянути файл

Перед Після
Ширина: 700  |  Висота: 1244  |  Розмір: 383 KiB

BIN
image/page2.jpg Переглянути файл

Перед Після
Ширина: 700  |  Висота: 1244  |  Розмір: 383 KiB

BIN
image/page3.jpg Переглянути файл

Перед Після
Ширина: 700  |  Висота: 1244  |  Розмір: 383 KiB

BIN
image/page4.jpg Переглянути файл

Перед Після
Ширина: 700  |  Висота: 1244  |  Розмір: 383 KiB

BIN
image/test-l.png Переглянути файл

Перед Після
Ширина: 63  |  Висота: 64  |  Розмір: 4.2 KiB

BIN
image/title-qrcode.png Переглянути файл

Перед Після
Ширина: 268  |  Висота: 268  |  Розмір: 28 KiB

BIN
image/title.png Переглянути файл

Перед Після
Ширина: 546  |  Висота: 198  |  Розмір: 67 KiB

Завантаження…
Відмінити
Зберегти