罗广聪

发现 样式OK

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 });