| @@ -17,6 +17,8 @@ import HttpUtils from './HttpUtils.js'; | |||||
| import CodePush from "react-native-code-push"; | import CodePush from "react-native-code-push"; | ||||
| import DeviceInfo from "react-native-device-info"; | import DeviceInfo from "react-native-device-info"; | ||||
| import * as Animatable from 'react-native-animatable'; | |||||
| // 取得屏幕的宽高Dimensions | // 取得屏幕的宽高Dimensions | ||||
| const { width, height } = Dimensions.get('window'); | const { width, height } = Dimensions.get('window'); | ||||
| @@ -143,9 +145,10 @@ getAdDataList() { | |||||
| .then(result => { | .then(result => { | ||||
| this.setState({ | this.setState({ | ||||
| adDataList : result.data.list}); | 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)) | .catch(error => console.error(error)) | ||||
| } | } | ||||
| @@ -193,12 +196,12 @@ render() { | |||||
| <View style={styles.content}> | <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} > | <ImageBackground source={require('./image/item-background.png')} resizeMode='center' style={styles.contentItemDownLayer} > | ||||
| <View style={styles.contentItemTop}> | <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}> | <View style={styles.contentItemTopDetail}> | ||||
| <Text style={styles.contentItemTopDetailTitle}>{this.state.contentItem1.target.title}</Text> | <Text style={styles.contentItemTopDetailTitle}>{this.state.contentItem1.target.title}</Text> | ||||
| <Text style={styles.contentItemTopDetailRemark}>{this.state.contentItem1.target.remark}</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} /> | <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} > | <ImageBackground source={require('./image/item-background.png')} resizeMode='center' style={styles.contentItemDownLayer} > | ||||
| <View style={styles.contentItemTop}> | <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}> | <View style={styles.contentItemTopDetail}> | ||||
| <Text style={styles.contentItemTopDetailTitle}>{this.state.contentItem1.target.title}</Text> | <Text style={styles.contentItemTopDetailTitle}>{this.state.contentItem1.target.title}</Text> | ||||
| <Text style={styles.contentItemTopDetailRemark}>{this.state.contentItem1.target.remark}</Text> | <Text style={styles.contentItemTopDetailRemark}>{this.state.contentItem1.target.remark}</Text> | ||||
| @@ -257,14 +261,14 @@ render() { | |||||
| </ImageBackground> | </ImageBackground> | ||||
| <Image source={require('./image/discount.png')} resizeMode='center' style={styles.contentItemUpLayer} /> | <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} > | <ImageBackground source={require('./image/item-background.png')} resizeMode='center' style={styles.contentItemDownLayer} > | ||||
| <View style={styles.contentItemTop}> | <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}> | <View style={styles.contentItemTopDetail}> | ||||
| <Text style={styles.contentItemTopDetailTitle}>{this.state.contentItem1.target.title}</Text> | <Text style={styles.contentItemTopDetailTitle}>{this.state.contentItem1.target.title}</Text> | ||||
| <Text style={styles.contentItemTopDetailRemark}>{this.state.contentItem1.target.remark}</Text> | <Text style={styles.contentItemTopDetailRemark}>{this.state.contentItem1.target.remark}</Text> | ||||
| @@ -290,7 +294,7 @@ render() { | |||||
| </ImageBackground> | </ImageBackground> | ||||
| <Image source={require('./image/discount.png')} resizeMode='center' style={styles.contentItemUpLayer} /> | <Image source={require('./image/discount.png')} resizeMode='center' style={styles.contentItemUpLayer} /> | ||||
| </View> | |||||
| </Animatable.View> | |||||
| </View> | </View> | ||||
| <View style={styles.bottom}> | <View style={styles.bottom}> | ||||
| @@ -464,12 +468,12 @@ render() { | |||||
| }, | }, | ||||
| //layer content item top | //layer content item top | ||||
| contentItemTopCover:{ | |||||
| contentItemTopCoverImg:{ | |||||
| flex: 5, | flex: 5, | ||||
| width:'100%', | width:'100%', | ||||
| height:'100%', | height:'100%', | ||||
| borderRadius:10, | borderRadius:10, | ||||
| backgroundColor:'blue' | |||||
| backgroundColor:'transparent' | |||||
| }, | }, | ||||
| contentItemTopDetail:{ | contentItemTopDetail:{ | ||||
| flex: 6, | flex: 6, | ||||