| @@ -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, | |||