罗广聪 / ProtectGod

Go to a project
Toggle navigation Toggle navigation pinning
罗广聪
83f2e550 1 parent ec9ba189

完成登录+我的页面

Inline Side-by-side
Showing 8 changed files with 762 additions and 184 deletions
@@ -14,10 +14,19 @@ import { @@ -14,10 +14,19 @@ import {
14 import Main from './src/pages/main'; 14 import Main from './src/pages/main';
15 15
16 export default class ProtectGod extends Component { 16 export default class ProtectGod extends Component {
  17 + constructor(props) {
  18 + super(props);
  19 + this.state = {
  20 + isLogin: true
  21 + }
  22 + }
17 render() { 23 render() {
  24 +
  25 + console.log("看看这个登录state",this.state.isLogin);
18 return ( 26 return (
19 <Main 27 <Main
20 - loginSuccess={false} 28 + loginSuccess={this.state.isLogin}
  29 + onLogin={ (isLogin) => {this.setState({isLogin})}}
21 /> 30 />
22 ); 31 );
23 } 32 }
@@ -15,7 +15,7 @@ export default class Details extends Component { @@ -15,7 +15,7 @@ export default class Details extends Component {
15 super(props); 15 super(props);
16 this.state = { 16 this.state = {
17 data: this.props.data, 17 data: this.props.data,
18 - text: "回复 汉克斯" 18 + text: ""
19 }; 19 };
20 } 20 }
21 componentWillMount() { 21 componentWillMount() {
@@ -84,9 +84,9 @@ export default class Details extends Component { @@ -84,9 +84,9 @@ export default class Details extends Component {
84 <View style={styles.sendMsgContaier}> 84 <View style={styles.sendMsgContaier}>
85 <TextInput 85 <TextInput
86 style={styles.msgInput} 86 style={styles.msgInput}
  87 + placeholder="回复 汉克斯"
87 onChangeText={text => this.setState({ text })} 88 onChangeText={text => this.setState({ text })}
88 value={this.state.text} 89 value={this.state.text}
89 - placeholderTextColor="gray"  
90 selectionColor="#1B9341" 90 selectionColor="#1B9341"
91 clearTextOnFocus={true} 91 clearTextOnFocus={true}
92 numberOfLines={1} 92 numberOfLines={1}
@@ -7,12 +7,16 @@ import { @@ -7,12 +7,16 @@ import {
7 Image, 7 Image,
8 TouchableOpacity, 8 TouchableOpacity,
9 ScrollView, 9 ScrollView,
  10 + TextInput
10 } from "react-native"; 11 } from "react-native";
11 12
12 export default class Login extends Component { 13 export default class Login extends Component {
13 constructor(props) { 14 constructor(props) {
14 super(props); 15 super(props);
15 - this.state = {}; 16 + this.state = {
  17 + phone: "",
  18 + password: ""
  19 + };
16 } 20 }
17 componentDidMount() { 21 componentDidMount() {
18 console.log("thisprops", this.props); 22 console.log("thisprops", this.props);
@@ -20,20 +24,141 @@ export default class Login extends Component { @@ -20,20 +24,141 @@ export default class Login extends Component {
20 render() { 24 render() {
21 return ( 25 return (
22 <View style={styles.container}> 26 <View style={styles.container}>
23 - <Text>我是登录页面</Text> 27 + <Text style={styles.appName}>保护神</Text>
  28 + <View style={styles.inputField}>
  29 + <Image
  30 + style={styles.icon}
  31 + source={require("../assets/login/ic_phone.png")}
  32 + />
  33 + <TextInput
  34 + style={styles.textInput}
  35 + placeholder="请输入手机号"
  36 + value={this.state.phone}
  37 + onChangeText={phone => this.setState({ phone })}
  38 + autoFocus={true}
  39 + selectionColor="#1B9341"
  40 + clearTextOnFocus={true}
  41 + numberOfLines={1}
  42 + clearButtonMode="always"
  43 + keyboardType="default"
  44 + />
  45 + </View>
  46 + <View style={styles.inputField}>
  47 + <Image
  48 + style={styles.icon}
  49 + source={require("../assets/login/ic_password2.png")}
  50 + />
  51 + <TextInput
  52 + style={styles.textInput}
  53 + placeholder="请输入密码"
  54 + secureTextEntry={true}
  55 + value={this.state.password}
  56 + onChangeText={password => this.setState({ password })}
  57 + selectionColor="#1B9341"
  58 + clearTextOnFocus={true}
  59 + numberOfLines={1}
  60 + clearButtonMode="always"
  61 + keyboardType="default"
  62 + />
  63 + </View>
  64 + {/* <TouchableOpacity style={styles.helpContaier}>
  65 + <Text style={styles.forgetPassword}>忘记密码？</Text>
  66 + </TouchableOpacity> */}
  67 + <TouchableOpacity style={styles.confirmBtn} onPress={() => {this.loginRequest()}}>
  68 + <Text style={styles.login}>登录</Text>
  69 + </TouchableOpacity>
  70 + <TouchableOpacity style={styles.registerContaier}>
  71 + <Text style={styles.register}>注册账号</Text>
  72 + </TouchableOpacity>
24 </View> 73 </View>
25 ); 74 );
26 } 75 }
  76 +
  77 + loginRequest() {
  78 + if(this.props.loginSuccess) return;
  79 + let phone = this.state.phone,
  80 + password = this.state.password;
  81 + if (!(/^1(3|4|5|7|8)\d{9}$/.test(phone))) {
  82 + alert("请正确输入手机号码");
  83 + return;
  84 + }
  85 + // } else if (phone != 13000000000 && phone != 18888888888) {
  86 + // console.log("手机号和密码",phone,password)
  87 + // alert("登录账号错误");
  88 + // return;
  89 + // }
  90 + if (password === "") {
  91 + alert("请输入密码");
  92 + return;
  93 + } else if (password !== "000000") {
  94 + alert("账号密码有误");
  95 + return;
  96 + }
  97 + this.props.onLogin(true);
  98 + }
  99 +
27 } 100 }
28 101
29 const styles = StyleSheet.create({ 102 const styles = StyleSheet.create({
30 container: { 103 container: {
31 flex: 1, 104 flex: 1,
32 - paddingTop: 64, 105 + paddingTop: 125,
33 justifyContent: "flex-start", 106 justifyContent: "flex-start",
34 alignItems: "stretch", 107 alignItems: "stretch",
35 - backgroundColor: "white", 108 + backgroundColor: "#F5FCFF",
36 paddingLeft: 38, 109 paddingLeft: 38,
37 - paddingRight: 38, 110 + paddingRight: 38
  111 + },
  112 + appName: {
  113 + fontSize: 26,
  114 + color: "#030303",
  115 + alignSelf: "center",
  116 + marginBottom: 77
  117 + },
  118 + inputField: {
  119 + flexDirection: "row",
  120 + alignItems: "center",
  121 + borderStyle: "solid",
  122 + borderBottomWidth: 1,
  123 + borderColor: "#E6E6E6",
  124 + height: 51
  125 + },
  126 + icon: {
  127 + width: 11,
  128 + height: 15,
  129 + marginRight: 10
  130 + },
  131 + textInput: {
  132 + flex: 1
38 }, 133 },
  134 + helpContaier: {
  135 + flexDirection: "row",
  136 + justifyContent: "flex-end",
  137 + marginTop: 10,
  138 + },
  139 + forgetPassword: {
  140 + color: "#999999",
  141 + fontSize: 14,
  142 + },
  143 + confirmBtn: {
  144 + marginTop: 30,
  145 + width: 299,
  146 + height: 45,
  147 + backgroundColor: "#1B9341",
  148 + borderRadius: 5,
  149 + alignItems: "center",
  150 + justifyContent: "center",
  151 + },
  152 + login: {
  153 + color: "#fff",
  154 + fontSize: 16,
  155 + },
  156 + registerContaier: {
  157 + alignItems: "center",
  158 + justifyContent: "center",
  159 + },
  160 + register: {
  161 + marginTop: 24,
  162 + color: "#1B9341",
  163 + }
39 }); 164 });
  1 +import React, { Component } from "react";
  2 +import {
  3 + AppRegistry,
  4 + StyleSheet,
  5 + Text,
  6 + View,
  7 + ScrollView,
  8 + TouchableOpacity,
  9 + Image
  10 +} from "react-native";
  11 +
  12 +export default class MsgNotification extends Component {
  13 + constructor(props) {
  14 + super(props);
  15 + this.state = {
  16 + ListData: [{
  17 + icon: require("../../assets/Mine/iconpic1.png"),
  18 + title: "评论回复",
  19 + time: "10小时前",
  20 + tips: "XXX回复了你的评论，点击查看",
  21 + },{
  22 + icon: require("../../assets/Mine/iconpic1.png"),
  23 + title: "评论回复",
  24 + time: "10小时前",
  25 + tips: "XXX回复了你的评论，点击查看",
  26 + },{
  27 + icon: require("../../assets/Mine/iconpic1.png"),
  28 + title: "评论回复",
  29 + time: "10小时前",
  30 + tips: "XXX回复了你的评论，点击查看",
  31 + },{
  32 + icon: require("../../assets/Mine/iconpic1.png"),
  33 + title: "评论回复",
  34 + time: "10小时前",
  35 + tips: "XXX回复了你的评论，点击查看",
  36 + }],
  37 + };
  38 + }
  39 +
  40 + render() {
  41 + return (
  42 + <View style={styles.container}>
  43 + {this.state.ListData.map((item, index) => {
  44 + return (
  45 + <TouchableOpacity style={styles.itemContainer} key={index}>
  46 + <Image style={styles.itemIcon} source={item.icon} />
  47 + <View style={styles.itemLeft}>
  48 + <View style={styles.itemLeftTop}>
  49 + <Text style={styles.itemTitle}>{item.title}</Text>
  50 + <Text style={styles.itemTime}>{item.time}</Text>
  51 + </View>
  52 + <Text style={styles.itemTips}>{item.tips}</Text>
  53 + </View>
  54 + </TouchableOpacity>
  55 + )
  56 + })}
  57 + </View>
  58 + );
  59 + }
  60 +}
  61 +
  62 +const styles = StyleSheet.create({
  63 + container: {
  64 + flex: 1,
  65 + justifyContent: "flex-start",
  66 + alignItems: "stretch",
  67 + backgroundColor: "#EFEFEF",
  68 + paddingTop: 74
  69 + },
  70 + itemContainer: {
  71 + flexDirection: "row",
  72 + alignItems: "center",
  73 + height: 72,
  74 + padding: 13,
  75 + backgroundColor: "white",
  76 + marginBottom: 1,
  77 + },
  78 + itemIcon: {
  79 + width: 46,
  80 + height: 46,
  81 + marginRight: 13,
  82 + },
  83 + itemLeft: {
  84 + flex: 1
  85 + },
  86 + itemLeftTop: {
  87 + flexDirection: "row",
  88 + alignItems: "center",
  89 + justifyContent: "space-between",
  90 + },
  91 + itemTitle: {
  92 + fontSize: 16,
  93 + color: "#030303"
  94 + },
  95 + itemTime: {
  96 + fontSize: 13,
  97 + color: "#999999"
  98 + },
  99 + itemTips: {
  100 + marginTop: 3,
  101 + fontSize: 13,
  102 + color: "#7A7A7A"
  103 + },
  104 +});
  1 +import React, { Component } from "react";
  2 +import {
  3 + AppRegistry,
  4 + StyleSheet,
  5 + Text,
  6 + View,
  7 + ScrollView,
  8 + TouchableOpacity,
  9 + TouchableHighlight,
  10 + Image,
  11 + Modal
  12 +} from "react-native";
  13 +
  14 +export default class PersonalInfo extends Component {
  15 + constructor(props) {
  16 + super(props);
  17 + this.state = {
  18 + modalVisible: false
  19 + };
  20 + }
  21 +
  22 + setModalVisible(visible) {
  23 + this.setState({ modalVisible: visible });
  24 + }
  25 +
  26 + render() {
  27 + const { name, identity } = this.props;
  28 + return (
  29 + <View style={styles.container}>
  30 + <TouchableOpacity
  31 + style={styles.itemContainer}
  32 + onPress={() => {
  33 + this.setModalVisible(true);
  34 + }}
  35 + >
  36 + <Text style={styles.itemLeft}>昵称</Text>
  37 + <View style={styles.itemRight}>
  38 + <Text style={styles.itemContent}>{name}</Text>
  39 + <Image
  40 + style={styles.itemArrow}
  41 + source={require("../../assets/Mine/rightArrow_gray.png")}
  42 + />
  43 + </View>
  44 + </TouchableOpacity>
  45 + <TouchableOpacity
  46 + style={styles.itemContainer}
  47 + onPress={() => {
  48 + this.setModalVisible(true);
  49 + }}
  50 + >
  51 + <Text style={styles.itemLeft}>职业</Text>
  52 + <View style={styles.itemRight}>
  53 + <Text style={styles.itemContent}>{identity}</Text>
  54 + <Image
  55 + style={styles.itemArrow}
  56 + source={require("../../assets/Mine/rightArrow_gray.png")}
  57 + />
  58 + </View>
  59 + </TouchableOpacity>
  60 +
  61 + <Modal
  62 + animationType={"slide"}
  63 + transparent={false}
  64 + visible={this.state.modalVisible}
  65 + onRequestClose={() => {
  66 + alert("Modal has been closed.");
  67 + }}
  68 + >
  69 + <View style={{ marginTop: 22 }}>
  70 + <View>
  71 + <Text>Hello World!</Text>
  72 + <TouchableOpacity
  73 + onPress={() => {
  74 + this.setModalVisible(!this.state.modalVisible);
  75 + }}
  76 + >
  77 + <Text>Hide Modal</Text>
  78 + </TouchableOpacity>
  79 + </View>
  80 + </View>
  81 + </Modal>
  82 + </View>
  83 + );
  84 + }
  85 +}
  86 +
  87 +const styles = StyleSheet.create({
  88 + container: {
  89 + flex: 1,
  90 + justifyContent: "flex-start",
  91 + alignItems: "stretch",
  92 + backgroundColor: "#EFEFEF",
  93 + paddingTop: 74
  94 + },
  95 + itemContainer: {
  96 + flexDirection: "row",
  97 + alignItems: "center",
  98 + justifyContent: "space-between",
  99 + paddingLeft: 16,
  100 + paddingRight: 16,
  101 + paddingTop: 13,
  102 + paddingBottom: 13,
  103 + marginBottom: 1,
  104 + backgroundColor: "white"
  105 + },
  106 + itemLeft: {
  107 + fontSize: 15,
  108 + color: "#242424"
  109 + },
  110 + itemRight: {
  111 + flexDirection: "row",
  112 + alignItems: "center"
  113 + },
  114 + itemContent: {
  115 + fontSize: 15,
  116 + color: "#7A7A7A",
  117 + marginRight: 6
  118 + },
  119 + itemArrow: {
  120 + width: 14,
  121 + height: 14
  122 + }
  123 +});
1 - 1 +import React, { Component } from "react";
2 -import React, { Component } from 'react';  
3 import { 2 import {
4 AppRegistry, 3 AppRegistry,
5 StyleSheet, 4 StyleSheet,
6 Text, 5 Text,
7 View, 6 View,
8 TouchableOpacity, 7 TouchableOpacity,
9 - Image, 8 + Image
10 -} from 'react-native'; 9 +} from "react-native";
11 - 10 +import myQuestion from "./myQuestion";
12 - 11 +import MsgNotification from "./MsgNotification";
  12 +import PersonalInfo from "./PersonalInfo";
13 13
14 export default class Mine extends Component { 14 export default class Mine extends Component {
  15 + constructor(props) {
  16 + super(props);
  17 + this.state = {
  18 + name: "哈哈哈",
  19 + identity: "职业代理人"
  20 + };
  21 + }
15 render() { 22 render() {
16 return ( 23 return (
17 <View style={styles.container}> 24 <View style={styles.container}>
18 - <TouchableOpacity style={styles.header}> 25 + <TouchableOpacity
  26 + style={styles.header}
  27 + onPress={() => {
  28 + this.props.navigator.push({
  29 + component: PersonalInfo,
  30 + passProps: {
  31 + name: this.state.name,
  32 + identity: this.state.identity
  33 + }
  34 + });
  35 + }}
  36 + >
19 <View style={styles.headerLeft}> 37 <View style={styles.headerLeft}>
20 - <Image source={require("../../assets/Mine/iconpic1.png")} style={styles.mineIcon} /> 38 + <Image
21 - <Text style={styles.mineName}>汉克斯</Text> 39 + source={require("../../assets/Mine/iconpic1.png")}
  40 + style={styles.mineIcon}
  41 + />
  42 + <Text style={styles.mineName}>{this.state.name}</Text>
22 </View> 43 </View>
23 - <Image source={require("../../assets/Mine/rightArrow_white.png")} style={styles.headerRight}/> 44 + <Image
  45 + source={require("../../assets/Mine/rightArrow_white.png")}
  46 + style={styles.headerRight}
  47 + />
24 </TouchableOpacity> 48 </TouchableOpacity>
25 - <BarList style={styles.midContainer} /> 49 + <View style={styles.midContainer}>
26 - <TouchableOpacity style={styles.loginOut}> 50 + <TouchableOpacity
  51 + style={styles.itemContainer}
  52 + onPress={() => {
  53 + this.props.navigator.push({
  54 + component: MsgNotification,
  55 + passProps: {}
  56 + });
  57 + }}
  58 + >
  59 + <View style={styles.itemLeft}>
  60 + <Image
  61 + style={styles.leftIcon}
  62 + source={require("../../assets/tabbar/ic_circle_s.png")}
  63 + />
  64 + <Text style={styles.leftTitle}>消息通知</Text>
  65 + <Text style={styles.leftNum}> (11)</Text>
  66 + </View>
  67 + <Image
  68 + style={styles.itemRight}
  69 + source={require("../../assets/Mine/rightArrow_gray.png")}
  70 + />
  71 + </TouchableOpacity>
  72 + <TouchableOpacity
  73 + style={styles.itemContainer}
  74 + onPress={() => {
  75 + this.props.navigator.push({
  76 + component: myQuestion,
  77 + passProps: {}
  78 + });
  79 + }}
  80 + >
  81 + <View style={styles.itemLeft}>
  82 + <Image
  83 + style={styles.leftIcon}
  84 + source={require("../../assets/tabbar/ic_circle_s.png")}
  85 + />
  86 + <Text style={styles.leftTitle}>我的提问</Text>
  87 + </View>
  88 + <Image
  89 + style={styles.itemRight}
  90 + source={require("../../assets/Mine/rightArrow_gray.png")}
  91 + />
  92 + </TouchableOpacity>
  93 + </View>
  94 + <TouchableOpacity
  95 + style={styles.loginOut}
  96 + onLogin={this.props.onLogin}
  97 + onPress={() => {
  98 + this.loginOut();
  99 + }}
  100 + >
27 <Text style={styles.loginOutText}>退出登录</Text> 101 <Text style={styles.loginOutText}>退出登录</Text>
28 </TouchableOpacity> 102 </TouchableOpacity>
29 </View> 103 </View>
30 ); 104 );
31 } 105 }
  106 +
  107 + loginOut() {
  108 + console.log("看看this是什么", this);
  109 + this.props.onLogin(false);
  110 + }
32 } 111 }
33 112
34 class BarList extends Component { 113 class BarList extends Component {
@@ -38,7 +117,7 @@ class BarList extends Component { @@ -38,7 +117,7 @@ class BarList extends Component {
38 <ListItem title={"消息通知"} num={"11"} /> 117 <ListItem title={"消息通知"} num={"11"} />
39 <ListItem title={"我的提问"} /> 118 <ListItem title={"我的提问"} />
40 </View> 119 </View>
41 - ) 120 + );
42 } 121 }
43 } 122 }
44 123
@@ -47,14 +126,22 @@ class ListItem extends Component { @@ -47,14 +126,22 @@ class ListItem extends Component {
47 return ( 126 return (
48 <TouchableOpacity style={styles.itemContainer}> 127 <TouchableOpacity style={styles.itemContainer}>
49 <View style={styles.itemLeft}> 128 <View style={styles.itemLeft}>
50 - <Image style={styles.leftIcon} source={require("../../assets/tabbar/ic_circle_s.png")} /> 129 + <Image
  130 + style={styles.leftIcon}
  131 + source={require("../../assets/tabbar/ic_circle_s.png")}
  132 + />
51 {/* <Image style={styles.leftIcon} source={require("../../assets/Mine/iconpic1.png")} /> */} 133 {/* <Image style={styles.leftIcon} source={require("../../assets/Mine/iconpic1.png")} /> */}
52 <Text style={styles.leftTitle}>{this.props.title}</Text> 134 <Text style={styles.leftTitle}>{this.props.title}</Text>
53 - {this.props.num?<Text style={styles.leftNum}> ({this.props.num})</Text>:null} 135 + {this.props.num ? (
  136 + <Text style={styles.leftNum}> ({this.props.num})</Text>
  137 + ) : null}
54 </View> 138 </View>
55 - <Image style={styles.itemRight} source={require("../../assets/Mine/rightArrow_gray.png")} /> 139 + <Image
  140 + style={styles.itemRight}
  141 + source={require("../../assets/Mine/rightArrow_gray.png")}
  142 + />
56 </TouchableOpacity> 143 </TouchableOpacity>
57 - ) 144 + );
58 } 145 }
59 } 146 }
60 147
@@ -64,7 +151,7 @@ const styles = StyleSheet.create({ @@ -64,7 +151,7 @@ const styles = StyleSheet.create({
64 justifyContent: "flex-start", 151 justifyContent: "flex-start",
65 alignItems: "stretch", 152 alignItems: "stretch",
66 backgroundColor: "#EFEFEF", 153 backgroundColor: "#EFEFEF",
67 - paddingTop: 64, 154 + paddingTop: 64
68 }, 155 },
69 header: { 156 header: {
70 backgroundColor: "#1B9341", 157 backgroundColor: "#1B9341",
@@ -74,12 +161,12 @@ const styles = StyleSheet.create({ @@ -74,12 +161,12 @@ const styles = StyleSheet.create({
74 paddingLeft: 13, 161 paddingLeft: 13,
75 paddingRight: 13, 162 paddingRight: 13,
76 alignItems: "center", 163 alignItems: "center",
77 - marginBottom: 10, 164 + marginBottom: 10
78 }, 165 },
79 headerLeft: { 166 headerLeft: {
80 flexDirection: "row", 167 flexDirection: "row",
81 justifyContent: "flex-start", 168 justifyContent: "flex-start",
82 - alignItems: "center", 169 + alignItems: "center"
83 }, 170 },
84 mineIcon: { 171 mineIcon: {
85 width: 46, 172 width: 46,
@@ -93,7 +180,7 @@ const styles = StyleSheet.create({ @@ -93,7 +180,7 @@ const styles = StyleSheet.create({
93 }, 180 },
94 headerRight: { 181 headerRight: {
95 width: 14, 182 width: 14,
96 - height: 14, 183 + height: 14
97 }, 184 },
98 midContainer: { 185 midContainer: {
99 // marginTop: 10, 186 // marginTop: 10,
@@ -110,17 +197,17 @@ const styles = StyleSheet.create({ @@ -110,17 +197,17 @@ const styles = StyleSheet.create({
110 backgroundColor: "#fff", 197 backgroundColor: "#fff",
111 borderStyle: "solid", 198 borderStyle: "solid",
112 borderColor: "#F0F0F0", 199 borderColor: "#F0F0F0",
113 - borderBottomWidth: 1, 200 + borderBottomWidth: 1
114 }, 201 },
115 itemLeft: { 202 itemLeft: {
116 flexDirection: "row", 203 flexDirection: "row",
117 justifyContent: "flex-start", 204 justifyContent: "flex-start",
118 - alignItems: "center", 205 + alignItems: "center"
119 }, 206 },
120 leftIcon: { 207 leftIcon: {
121 marginRight: 11, 208 marginRight: 11,
122 width: 16, 209 width: 16,
123 - height: 16, 210 + height: 16
124 }, 211 },
125 leftTitle: { 212 leftTitle: {
126 fontSize: 15, 213 fontSize: 15,
@@ -132,17 +219,16 @@ const styles = StyleSheet.create({ @@ -132,17 +219,16 @@ const styles = StyleSheet.create({
132 }, 219 },
133 itemRight: { 220 itemRight: {
134 width: 14, 221 width: 14,
135 - height: 14, 222 + height: 14
136 }, 223 },
137 loginOut: { 224 loginOut: {
138 marginTop: 10, 225 marginTop: 10,
139 height: 46, 226 height: 46,
140 backgroundColor: "#fff", 227 backgroundColor: "#fff",
141 - justifyContent: "center", 228 + justifyContent: "center"
142 }, 229 },
143 loginOutText: { 230 loginOutText: {
144 textAlign: "center", 231 textAlign: "center",
145 - fontSize: 15, 232 + fontSize: 15
146 - }, 233 + }
147 }); 234 });
148 -  
  1 +import React, { Component } from "react";
  2 +import {
  3 + AppRegistry,
  4 + StyleSheet,
  5 + Text,
  6 + View,
  7 + ScrollView,
  8 + TouchableOpacity,
  9 + Image
  10 +} from "react-native";
  11 +
  12 +export default class MyQuestion extends Component {
  13 + constructor(props) {
  14 + super(props);
  15 + this.state = {
  16 + ListData: [
  17 + {
  18 + title: "家庭经济越差越应该买保险，因为你病不起，输不起，也折腾不起…",
  19 + content:
  20 + "现实生活就是如此矛盾现实生活，就是如此矛盾现实生活就是如此矛盾现实生活就是如此矛盾现实生活就是如此矛盾现实生活就是如此矛盾现实矛是如此此…",
  21 + name: "嘿嘿嘿",
  22 + identity: "保险代理人",
  23 + image: require("../../assets/Mine/iconpic1.png"),
  24 + num: "30",
  25 + time: "2017-8-15",
  26 + comments: [{
  27 + replyer: "噢噢噢",
  28 + replayicon: require("../../assets/Mine/iconpic1.png"),
  29 + beenreplyer: "嘿嘿嘿",
  30 + content: "生活就是如此矛是如此此生活就是如此矛盾现实生活就是如此矛盾现",
  31 + time: "两小时前",
  32 + },{
  33 + replyer: "哦哦哦",
  34 + replayicon: require("../../assets/Mine/iconpic1.png"),
  35 + beenreplyer: "哈哈哈",
  36 + content: "生活就是如此矛是如此此生活就是如此矛盾现实生活就是如此矛盾现",
  37 + time: "两小时前",
  38 + },{
  39 + replyer: "洛洛洛",
  40 + replayicon: require("../../assets/Mine/iconpic1.png"),
  41 + beenreplyer: "额额额",
  42 + content: "生活就是如此矛是如此此生活就是如此矛盾现实生活就是如此矛盾现",
  43 + time: "两小时前",
  44 + }],
  45 + },
  46 + {
  47 + title: "家庭经济越差越应该买保险，因为你病不起，输不起，也折腾不起…",
  48 + content:
  49 + "现实生活就是如此矛盾现实生活，就是如此矛盾现实生活就是如此矛盾现实生活就是如此矛盾现实生活就是如此矛盾现实生活就是如此矛盾现实矛是如此此…",
  50 + name: "嘿嘿嘿",
  51 + identity: "保险代理人",
  52 + image: require("../../assets/circle/newspic.png"),
  53 + num: "29",
  54 + time: "2017-8-15",
  55 + comments: []
  56 + },
  57 + {
  58 + title: "因为你病不起，输不起，也折腾不起…",
  59 + content:
  60 + "现实生活就是如此矛盾现实生活，就是如此矛盾现实生活就是如此矛盾现实生活，就是如此矛盾现实生活就是如此矛盾现实生活就是如此矛盾现实生活就是如此矛盾现实生活就是如此矛盾现实矛是如此此…现实生活就是如此矛盾现实生活就是如此矛盾现实生活就是如此矛盾现实生活就是如此矛盾现实矛是如此此…",
  61 + name: "luosf",
  62 + identity: "保险代理人",
  63 + image: require("../../assets/circle/newspic.png"),
  64 + num: "10",
  65 + time: "2017-8-15",
  66 + comments: []
  67 + }
  68 + ],
  69 + testData: [],
  70 + };
  71 + }
  72 +
  73 + // componentWillMount() {
  74 + // var that = this;
  75 + // return fetch(`https://mpay.brae.co/test/insurance/article`,{
  76 + // method: "POST",
  77 + // headers: {
  78 + // 'Accept': 'application/json',
  79 + // 'Content-Type': 'application/json',
  80 + // },
  81 + // })
  82 + // .then((resp) => {
  83 + // console.log("测试接口",resp);
  84 + // // return false;
  85 + // if (resp.status === 200) {
  86 + // return resp.json();
  87 + // } else {
  88 + // console.error("something went wrong!");
  89 + // }
  90 + // })
  91 + // .then((respJson) => {
  92 + // if (respJson.enmsg != 'ok') {
  93 + // console.error(err);
  94 + // alert(respJson.cnmsg);
  95 + // } else {
  96 + // that.setState({
  97 + // testData: respJson.data
  98 + // });
  99 + // console.log('state.testData',that.state.testData);
  100 + // }
  101 + // })
  102 + // .catch((err) => console.error(err))
  103 + // }
  104 +
  105 + render() {
  106 + return (
  107 + <View style={styles.container}>
  108 + <ScrollView
  109 + style={styles.scrollViewContainer}
  110 + automaticallyAdjustContentInsets={false}
  111 + >
  112 + {this.state.ListData.map((item, index) => {
  113 + return (
  114 + <TouchableOpacity
  115 + style={styles.itemContainer}
  116 + key={index}
  117 + >
  118 + <Text style={styles.itemTitle} numberOfLines={2}>
  119 + {item.title}
  120 + </Text>
  121 + <Text style={styles.itemContent} numberOfLines={3}>
  122 + {item.content}
  123 + </Text>
  124 + <View style={styles.itemInfoWrapper}>
  125 + <View style={styles.itemInfoLeft}>
  126 + {/* <Image
  127 + source={item.image}
  128 + style={[styles.itemInfoIcon, { width: 26, height: 26 }]}
  129 + />
  130 + <Text style={styles.itemInfoName}>{item.name}</Text> */}
  131 + </View>
  132 + <Text style={styles.itemInfoRight}>{item.num} 评论</Text>
  133 + </View>
  134 + </TouchableOpacity>
  135 + );
  136 + })}
  137 + </ScrollView>
  138 + </View>
  139 + );
  140 + }
  141 +}
  142 +
  143 +const styles = StyleSheet.create({
  144 + container: {
  145 + flex: 1,
  146 + justifyContent: "flex-start",
  147 + alignItems: "stretch",
  148 + backgroundColor: "#EFEFEF",
  149 + paddingTop: 74
  150 + },
  151 + scrollViewContainer: {
  152 + // height: 300
  153 + },
  154 + scrollViewText: {
  155 + color: "#7A7A7A",
  156 + fontSize: 13,
  157 + marginTop: 10,
  158 + textAlign: "center"
  159 + },
  160 + itemContainer: {
  161 + backgroundColor: "#fff",
  162 + marginBottom: 10,
  163 + height: 180,
  164 + paddingLeft: 13,
  165 + paddingRight: 13,
  166 + paddingTop: 19
  167 + },
  168 + itemTitle: {
  169 + fontSize: 17,
  170 + color: "#242424",
  171 + lineHeight: 24
  172 + },
  173 + itemContent: {
  174 + marginTop: 5,
  175 + fontSize: 14,
  176 + color: "#7A7A7A",
  177 + lineHeight: 20
  178 + },
  179 + itemInfoWrapper: {
  180 + flexDirection: "row",
  181 + justifyContent: "flex-end",
  182 + alignItems: "center",
  183 + marginTop: 11
  184 + },
  185 + itemInfoLeft: {
  186 + flexDirection: "row",
  187 + justifyContent: "flex-start",
  188 + alignItems: "center"
  189 + },
  190 + itemInfoIcon: {
  191 + marginRight: 10
  192 + },
  193 + itemInfoName: {
  194 + fontSize: 13,
  195 + color: "#242424",
  196 + lineHeight: 18
  197 + },
  198 + itemInfoRight: {
  199 + fontSize: 13,
  200 + color: "#999999",
  201 + lineHeight: 18
  202 + }
  203 +});
@@ -30,165 +30,93 @@ export default class Main extends Component { @@ -30,165 +30,93 @@ export default class Main extends Component {
30 } 30 }
31 31
32 render() { 32 render() {
33 - // {this.state.loginSuccess ? {} : {}}  
34 const { loginSuccess } = this.props; 33 const { loginSuccess } = this.props;
35 return ( 34 return (
36 loginSuccess 35 loginSuccess
37 ? ( 36 ? (
38 <TabBarIOS tintColor="#08CC6A" barTintColor="white"> 37 <TabBarIOS tintColor="#08CC6A" barTintColor="white">
39 - <TabBarIOS.Item 38 + <TabBarIOS.Item
40 - title="首页" 39 + title="首页"
41 - icon={require("../assets/tabbar/ic_home_n.png")} 40 + icon={require("../assets/tabbar/ic_home_n.png")}
42 - selected={this.state.selectedItem == "home"} 41 + selected={this.state.selectedItem == "home"}
43 - onPress={() => { 42 + onPress={() => {
44 - this.setState({ 43 + this.setState({
45 - selectedItem: "home" 44 + selectedItem: "home"
46 - }); 45 + });
47 - }}  
48 - >  
49 - <NavigatorIOS  
50 - style={{ flex: 1 }}  
51 - initialRoute={{  
52 - component: Home,  
53 - title: "保护神"  
54 }} 46 }}
55 - 47 + >
56 - /> 48 + <NavigatorIOS
57 - </TabBarIOS.Item> 49 + style={{ flex: 1 }}
58 - <TabBarIOS.Item 50 + initialRoute={{
59 - title="保圈" 51 + component: Home,
60 - icon={require("../assets/tabbar/ic_circle_n.png")} 52 + title: "保护神"
61 - selected={this.state.selectedItem == "insuranceCircle"} 53 + }}
62 - onPress={() => { 54 +
63 - this.setState({ 55 + />
64 - selectedItem: "insuranceCircle" 56 + </TabBarIOS.Item>
65 - }); 57 + <TabBarIOS.Item
66 - }} 58 + title="保圈"
67 - > 59 + icon={require("../assets/tabbar/ic_circle_n.png")}
68 - <NavigatorIOS 60 + selected={this.state.selectedItem == "insuranceCircle"}
69 - style={{ flex: 1 }} 61 + onPress={() => {
70 - initialRoute={{ 62 + this.setState({
71 - component: InsuranceCircle, 63 + selectedItem: "insuranceCircle"
72 - title: "保护神", 64 + });
73 }} 65 }}
74 - /> 66 + >
75 - </TabBarIOS.Item> 67 + <NavigatorIOS
76 - <TabBarIOS.Item 68 + style={{ flex: 1 }}
77 - title="保堂" 69 + initialRoute={{
78 - icon={require("../assets/tabbar/ic_umbrella_n.png")} 70 + component: InsuranceCircle,
79 - selected={this.state.selectedItem == "insuranceChurch"} 71 + title: "保护神",
80 - onPress={() => { 72 + }}
81 - this.setState({ 73 + />
82 - selectedItem: "insuranceChurch" 74 + </TabBarIOS.Item>
83 - }); 75 + <TabBarIOS.Item
84 - }} 76 + title="保堂"
85 - > 77 + icon={require("../assets/tabbar/ic_umbrella_n.png")}
86 - <NavigatorIOS 78 + selected={this.state.selectedItem == "insuranceChurch"}
87 - style={{ flex: 1 }} 79 + onPress={() => {
88 - initialRoute={{ 80 + this.setState({
89 - component: InsuranceChurch, 81 + selectedItem: "insuranceChurch"
90 - title: "保护神" 82 + });
91 }} 83 }}
92 - /> 84 + >
93 - </TabBarIOS.Item> 85 + <NavigatorIOS
94 - <TabBarIOS.Item 86 + style={{ flex: 1 }}
95 - title="我的" 87 + initialRoute={{
96 - icon={require("../assets/tabbar/ic_mine_n.png")} 88 + component: InsuranceChurch,
97 - selected={this.state.selectedItem == "mine"} 89 + title: "保护神"
98 - onPress={() => { 90 + }}
99 - this.setState({ 91 + />
100 - selectedItem: "mine" 92 + </TabBarIOS.Item>
101 - }); 93 + <TabBarIOS.Item
102 - }} 94 + title="我的"
103 - > 95 + icon={require("../assets/tabbar/ic_mine_n.png")}
104 - <NavigatorIOS 96 + selected={this.state.selectedItem == "mine"}
105 - style={{ flex: 1 }} 97 + onPress={() => {
106 - initialRoute={{ 98 + this.setState({
107 - component: Mine, 99 + selectedItem: "mine"
108 - title: "保护神" 100 + });
109 }} 101 }}
110 - /> 102 + >
111 - </TabBarIOS.Item> 103 + <NavigatorIOS
112 - </TabBarIOS> 104 + style={{ flex: 1 }}
  105 +
  106 + initialRoute={{
  107 + component: Mine,
  108 + title: "保护神",
  109 + passProps: {
  110 + onLogin: this.props.onLogin
  111 + }
  112 + }}
  113 + />
  114 + </TabBarIOS.Item>
  115 + </TabBarIOS>
113 ) 116 )
114 : ( 117 : (
115 - <Login /> 118 + <Login loginSuccess={this.props.loginSuccess} onLogin={this.props.onLogin} />
116 ) 119 )
117 - // <TabBarIOS tintColor="#08CC6A" barTintColor="white">  
118 - // <TabBarIOS.Item  
119 - // title="首页"  
120 - // icon={require("../assets/tabbar/ic_home_n.png")}  
121 - // selected={this.state.selectedItem == "home"}  
122 - // onPress={() => {  
123 - // this.setState({  
124 - // selectedItem: "home"  
125 - // });  
126 - // }}  
127 - // >  
128 - // <NavigatorIOS  
129 - // style={{ flex: 1 }}  
130 - // initialRoute={{  
131 - // component: Home,  
132 - // title: "保护神"  
133 - // }}  
134 -  
135 - // />  
136 - // </TabBarIOS.Item>  
137 - // <TabBarIOS.Item  
138 - // title="保圈"  
139 - // icon={require("../assets/tabbar/ic_circle_n.png")}  
140 - // selected={this.state.selectedItem == "insuranceCircle"}  
141 - // onPress={() => {  
142 - // this.setState({  
143 - // selectedItem: "insuranceCircle"  
144 - // });  
145 - // }}  
146 - // >  
147 - // <NavigatorIOS  
148 - // style={{ flex: 1 }}  
149 - // initialRoute={{  
150 - // component: InsuranceCircle,  
151 - // title: "保护神",  
152 - // }}  
153 - // />  
154 - // </TabBarIOS.Item>  
155 - // <TabBarIOS.Item  
156 - // title="保堂"  
157 - // icon={require("../assets/tabbar/ic_umbrella_n.png")}  
158 - // selected={this.state.selectedItem == "insuranceChurch"}  
159 - // onPress={() => {  
160 - // this.setState({  
161 - // selectedItem: "insuranceChurch"  
162 - // });  
163 - // }}  
164 - // >  
165 - // <NavigatorIOS  
166 - // style={{ flex: 1 }}  
167 - // initialRoute={{  
168 - // component: InsuranceChurch,  
169 - // title: "保护神"  
170 - // }}  
171 - // />  
172 - // </TabBarIOS.Item>  
173 - // <TabBarIOS.Item  
174 - // title="我的"  
175 - // icon={require("../assets/tabbar/ic_mine_n.png")}  
176 - // selected={this.state.selectedItem == "mine"}  
177 - // onPress={() => {  
178 - // this.setState({  
179 - // selectedItem: "mine"  
180 - // });  
181 - // }}  
182 - // >  
183 - // <NavigatorIOS  
184 - // style={{ flex: 1 }}  
185 - // initialRoute={{  
186 - // component: Mine,  
187 - // title: "保护神"  
188 - // }}  
189 - // />  
190 - // </TabBarIOS.Item>  
191 - // </TabBarIOS>  
192 ); 120 );
193 } 121 }
194 } 122 }