Просмотр исходного кода

[样式][新增]:优惠券动画效果

tags/jenkins-front-end-screenad-53
hupeng 6 лет назад
Родитель
Сommit
dd0aa0f8a4
1 измененных файлов: 18 добавлений и 14 удалений
  1. +18
    -14
      App.js

+ 18
- 14
App.js Просмотреть файл

@@ -17,6 +17,8 @@ import HttpUtils from './HttpUtils.js';
import CodePush from "react-native-code-push";
import DeviceInfo from "react-native-device-info";

import * as Animatable from 'react-native-animatable';

// 取得屏幕的宽高Dimensions
const { width, height } = Dimensions.get('window');

@@ -143,9 +145,10 @@ getAdDataList() {
.then(result => {
this.setState({
adDataList : result.data.list});
this.setState({
contentItem1 : this.state.adDataList[0]});
})
if (this.state.adDataList.length > 0)
this.setState({
contentItem1 : this.state.adDataList[0]});
})
.catch(error => console.error(error))
}

@@ -193,12 +196,12 @@ render() {

<View style={styles.content}>

<View style={styles.contentItem}>
<Animatable.View animation="slideInDown" style={styles.contentItem}>

<ImageBackground source={require('./image/item-background.png')} resizeMode='center' style={styles.contentItemDownLayer} >
<View style={styles.contentItemTop}>
<Image source={{uri: this.state.contentItem1.coverImg}} resizeMode='cover' style={styles.contentItemTopCover} />
<Image source={{uri: this.state.contentItem1.coverImg}} resizeMode='cover' style={styles.contentItemTopCoverImg} />
<View style={styles.contentItemTopDetail}>
<Text style={styles.contentItemTopDetailTitle}>{this.state.contentItem1.target.title}</Text>
<Text style={styles.contentItemTopDetailRemark}>{this.state.contentItem1.target.remark}</Text>
@@ -225,13 +228,14 @@ render() {

<Image source={require('./image/discount.png')} resizeMode='center' style={styles.contentItemUpLayer} />

</View>
<View style={styles.contentItem}>
</Animatable.View>

<Animatable.View animation="slideInLeft" style={styles.contentItem}>
<ImageBackground source={require('./image/item-background.png')} resizeMode='center' style={styles.contentItemDownLayer} >

<View style={styles.contentItemTop}>
<Image source={{uri: this.state.contentItem1.coverImg}} resizeMode='cover' style={styles.contentItemTopCover} />
<Image source={{uri: this.state.contentItem1.coverImg}} resizeMode='cover' style={styles.contentItemTopCoverImg} />
<View style={styles.contentItemTopDetail}>
<Text style={styles.contentItemTopDetailTitle}>{this.state.contentItem1.target.title}</Text>
<Text style={styles.contentItemTopDetailRemark}>{this.state.contentItem1.target.remark}</Text>
@@ -257,14 +261,14 @@ render() {

</ImageBackground>
<Image source={require('./image/discount.png')} resizeMode='center' style={styles.contentItemUpLayer} />
</View>
</Animatable.View>

<View style={styles.contentItem}>
<Animatable.View animation="slideInRight" style={styles.contentItem}>
<ImageBackground source={require('./image/item-background.png')} resizeMode='center' style={styles.contentItemDownLayer} >

<View style={styles.contentItemTop}>
<Image source={{uri: this.state.contentItem1.coverImg}} resizeMode='cover' style={styles.contentItemTopCover} />
<Image source={{uri: this.state.contentItem1.coverImg}} resizeMode='cover' style={styles.contentItemTopCoverImg} />
<View style={styles.contentItemTopDetail}>
<Text style={styles.contentItemTopDetailTitle}>{this.state.contentItem1.target.title}</Text>
<Text style={styles.contentItemTopDetailRemark}>{this.state.contentItem1.target.remark}</Text>
@@ -290,7 +294,7 @@ render() {

</ImageBackground>
<Image source={require('./image/discount.png')} resizeMode='center' style={styles.contentItemUpLayer} />
</View>
</Animatable.View>
</View>

<View style={styles.bottom}>
@@ -464,12 +468,12 @@ render() {
},

//layer content item top
contentItemTopCover:{
contentItemTopCoverImg:{
flex: 5,
width:'100%',
height:'100%',
borderRadius:10,
backgroundColor:'blue'
backgroundColor:'transparent'
},
contentItemTopDetail:{
flex: 6,


Загрузка…
Отмена
Сохранить