Showing
5 changed files
with
86 additions
and
19 deletions
src/assets/discover/bg.png
0 → 100644
423 KB
src/assets/discover/ic_copy@2x.png
0 → 100644
1.23 KB
src/assets/discover/ic_copy@3x.png
0 → 100644
1.4 KB
src/assets/归档.zip
deleted
100644 → 0
No preview for this file type
| @@ -7,6 +7,7 @@ import { | @@ -7,6 +7,7 @@ import { | ||
| 7 | Dimensions, | 7 | Dimensions, |
| 8 | ScrollView, | 8 | ScrollView, |
| 9 | Text, | 9 | Text, |
| 10 | + TouchableOpacity | ||
| 10 | } from "react-native"; | 11 | } from "react-native"; |
| 11 | import { StackNavigator, TabNavigator } from "react-navigation"; | 12 | import { StackNavigator, TabNavigator } from "react-navigation"; |
| 12 | 13 | ||
| @@ -14,7 +15,9 @@ export default class Discover extends Component { | @@ -14,7 +15,9 @@ export default class Discover extends Component { | ||
| 14 | constructor(props) { | 15 | constructor(props) { |
| 15 | super(props); | 16 | super(props); |
| 16 | this.state = { | 17 | this.state = { |
| 17 | - image: "", | 18 | + // image: "", |
| 19 | + word: "", | ||
| 20 | + date: {} | ||
| 18 | }; | 21 | }; |
| 19 | } | 22 | } |
| 20 | componentWillMount() { | 23 | componentWillMount() { |
| @@ -32,7 +35,7 @@ export default class Discover extends Component { | @@ -32,7 +35,7 @@ export default class Discover extends Component { | ||
| 32 | } | 35 | } |
| 33 | }) | 36 | }) |
| 34 | .then(resp => { | 37 | .then(resp => { |
| 35 | - console.log("大爷",resp); | 38 | + console.log("大爷", resp); |
| 36 | if (resp.status === 200) { | 39 | if (resp.status === 200) { |
| 37 | return resp.json(); | 40 | return resp.json(); |
| 38 | } else { | 41 | } else { |
| @@ -44,38 +47,102 @@ export default class Discover extends Component { | @@ -44,38 +47,102 @@ export default class Discover extends Component { | ||
| 44 | alert(respJson.cnmsg); | 47 | alert(respJson.cnmsg); |
| 45 | } else { | 48 | } else { |
| 46 | that.setState({ | 49 | that.setState({ |
| 47 | - image: respJson.data.image | 50 | + word: respJson.data.word, |
| 51 | + date: respJson.data.date | ||
| 48 | }); | 52 | }); |
| 49 | - console.log("图片文章", respJson.data); | 53 | + console.log("发现", respJson.data); |
| 50 | } | 54 | } |
| 51 | }); | 55 | }); |
| 52 | } | 56 | } |
| 53 | render() { | 57 | render() { |
| 54 | - const { image } = this.state; | 58 | + const { word, date } = this.state; |
| 55 | return ( | 59 | return ( |
| 56 | - <View style={styles.container}> | 60 | + <Image |
| 57 | - {/* <Text>图片首页</Text> */} | 61 | + style={styles.container} |
| 58 | - <Image | 62 | + source={require("../../assets/discover/bg.png")} |
| 59 | - style={styles.image} | 63 | + > |
| 60 | - source={{uri: image}} | 64 | + <View style={styles.date}> |
| 61 | - resizeMode="contain" | 65 | + <Text style={styles.day}>{date.day}</Text> |
| 62 | - > | 66 | + <View style={styles.leftContaier}> |
| 63 | - <Text>中央文案</Text> | 67 | + <Text style={styles.month}>{date.month}</Text> |
| 64 | - </Image> | 68 | + <Text style={styles.week}>{date.week}</Text> |
| 65 | - </View> | 69 | + </View> |
| 70 | + </View> | ||
| 71 | + <View style={styles.wordConatier}> | ||
| 72 | + <Text style={styles.word}>{word}}</Text> | ||
| 73 | + </View> | ||
| 74 | + <TouchableOpacity style={styles.button}> | ||
| 75 | + <Image style={styles.btnImg} source={require("../../assets/discover/ic_copy.png")} /> | ||
| 76 | + <Text style={styles.btnText}>复制文案</Text> | ||
| 77 | + </TouchableOpacity> | ||
| 78 | + </Image> | ||
| 66 | ); | 79 | ); |
| 67 | } | 80 | } |
| 68 | } | 81 | } |
| 69 | 82 | ||
| 70 | const styles = StyleSheet.create({ | 83 | const styles = StyleSheet.create({ |
| 71 | container: { | 84 | container: { |
| 72 | - flex: 1, | 85 | + width: Dimensions.get("window").width, |
| 73 | - backgroundColor: "white" | 86 | + height: Dimensions.get("window").height |
| 87 | + }, | ||
| 88 | + date: { | ||
| 89 | + backgroundColor: "rgba(255,255,255,0)", | ||
| 90 | + flexDirection: "row", | ||
| 91 | + justifyContent: "center", | ||
| 92 | + alignItems: "center", | ||
| 93 | + marginLeft: 100, | ||
| 94 | + marginRight: 100, | ||
| 95 | + marginTop: 25, | ||
| 96 | + marginBottom: 25 | ||
| 97 | + }, | ||
| 98 | + day: { | ||
| 99 | + fontSize: 75, | ||
| 100 | + color: "#fff" | ||
| 101 | + }, | ||
| 102 | + leftContaier: { | ||
| 103 | + marginLeft: 12 | ||
| 104 | + }, | ||
| 105 | + month: { | ||
| 106 | + fontSize: 23, | ||
| 107 | + color: "#fff" | ||
| 74 | }, | 108 | }, |
| 75 | - image: { | 109 | + week: { |
| 110 | + fontSize: 17, | ||
| 111 | + color: "#fff" | ||
| 112 | + }, | ||
| 113 | + wordConatier: { | ||
| 114 | + backgroundColor: "#FFFFFF", | ||
| 115 | + justifyContent: "center", | ||
| 116 | + alignItems: "center", | ||
| 117 | + borderRadius: 5, | ||
| 118 | + marginLeft: 20, | ||
| 119 | + marginRight: 20, | ||
| 120 | + paddingLeft: 22, | ||
| 121 | + paddingRight: 22, | ||
| 122 | + paddingTop: 28, | ||
| 123 | + paddingBottom: 28, | ||
| 124 | + }, | ||
| 125 | + word: { | ||
| 126 | + fontSize: 15, | ||
| 127 | + color: "#242424", | ||
| 128 | + lineHeight: 24 | ||
| 129 | + }, | ||
| 130 | + button: { | ||
| 76 | width: Dimensions.get("window").width, | 131 | width: Dimensions.get("window").width, |
| 77 | - height: Dimensions.get("window").height, | 132 | + backgroundColor: "rgba(255,255,255,0)", |
| 133 | + flexDirection: "row", | ||
| 78 | justifyContent: "center", | 134 | justifyContent: "center", |
| 79 | alignItems: "center", | 135 | alignItems: "center", |
| 136 | + position: "absolute", | ||
| 137 | + bottom: 150, | ||
| 138 | + }, | ||
| 139 | + btnImg: { | ||
| 140 | + width: 13, | ||
| 141 | + height: 15, | ||
| 142 | + marginRight: 5, | ||
| 143 | + }, | ||
| 144 | + btnText: { | ||
| 145 | + color: "white", | ||
| 146 | + fontSize: 15, | ||
| 80 | } | 147 | } |
| 81 | }); | 148 | }); |
-
Please register or login to post a comment