罗广聪 / ProtectGod

Go to a project
Toggle navigation Toggle navigation pinning
罗广聪
9b5076ce 1 parent a7cb5b88

我也不知道我改了啥啊

Inline Side-by-side
Showing 4 changed files with 196 additions and 148 deletions
@@ -4,29 +4,30 @@ @@ -4,29 +4,30 @@
4 * @flow 4 * @flow
5 */ 5 */
6 6
7 -import React, { Component } from 'react'; 7 +import React, { Component } from "react";
8 -import { 8 +import { AppRegistry, StyleSheet, Text, View } from "react-native";
9 - AppRegistry, 9 +import Main from "./src/pages/main";
10 - StyleSheet,  
11 - Text,  
12 - View  
13 -} from 'react-native';  
14 -import Main from './src/pages/main';  
15 10
16 export default class ProtectGod extends Component { 11 export default class ProtectGod extends Component {
17 - constructor(props) { 12 + constructor(props) {
18 - super(props); 13 + super(props);
19 - this.state = { 14 + this.state = {
20 - isLogin: true 15 + isLogin: true,
  16 + selectedItem: "home"
  17 + };
21 } 18 }
22 - }  
23 render() { 19 render() {
24 - 20 + console.log("看看这个登录state", this.state.isLogin);
25 - console.log("看看这个登录state",this.state.isLogin);  
26 return ( 21 return (
27 - <Main 22 + <Main
28 loginSuccess={this.state.isLogin} 23 loginSuccess={this.state.isLogin}
29 - onLogin={ (isLogin) => {this.setState({isLogin})}} 24 + selectedItem={this.state.selectedItem}
  25 + onLogin={isLogin => {
  26 + this.setState({
  27 + isLogin: isLogin,
  28 + selectedItem: "home"
  29 + });
  30 + }}
30 /> 31 />
31 ); 32 );
32 } 33 }
@@ -35,20 +36,20 @@ export default class ProtectGod extends Component { @@ -35,20 +36,20 @@ export default class ProtectGod extends Component {
35 const styles = StyleSheet.create({ 36 const styles = StyleSheet.create({
36 container: { 37 container: {
37 flex: 1, 38 flex: 1,
38 - justifyContent: 'center', 39 + justifyContent: "center",
39 - alignItems: 'center', 40 + alignItems: "center",
40 - backgroundColor: '#F5FCFF', 41 + backgroundColor: "#F5FCFF"
41 }, 42 },
42 welcome: { 43 welcome: {
43 fontSize: 20, 44 fontSize: 20,
44 - textAlign: 'center', 45 + textAlign: "center",
45 - margin: 10, 46 + margin: 10
46 }, 47 },
47 instructions: { 48 instructions: {
48 - textAlign: 'center', 49 + textAlign: "center",
49 - color: '#333333', 50 + color: "#333333",
50 - marginBottom: 5, 51 + marginBottom: 5
51 - }, 52 + }
52 }); 53 });
53 54
54 -AppRegistry.registerComponent('ProtectGod', () => ProtectGod); 55 +AppRegistry.registerComponent("ProtectGod", () => ProtectGod);
@@ -8,7 +8,7 @@ import { @@ -8,7 +8,7 @@ import {
8 TouchableOpacity, 8 TouchableOpacity,
9 Image, 9 Image,
10 TextInput, 10 TextInput,
11 - KeyboardAvoidingView, 11 + KeyboardAvoidingView
12 } from "react-native"; 12 } from "react-native";
13 13
14 export default class Details extends Component { 14 export default class Details extends Component {
@@ -28,61 +28,61 @@ export default class Details extends Component { @@ -28,61 +28,61 @@ export default class Details extends Component {
28 return ( 28 return (
29 <View style={styles.container}> 29 <View style={styles.container}>
30 <KeyboardAvoidingView behavior="padding" style={styles.KAVContainer}> 30 <KeyboardAvoidingView behavior="padding" style={styles.KAVContainer}>
31 - <ScrollView 31 + <ScrollView
32 - style={styles.scrollViewContainer} 32 + style={styles.scrollViewContainer}
33 - automaticallyAdjustContentInsets={false} 33 + automaticallyAdjustContentInsets={false}
34 - > 34 + >
35 - <Text style={styles.titleText} numberOfLines={3}> 35 + <Text style={styles.titleText} numberOfLines={3}>
36 - {data.title} 36 + {data.title}
37 - </Text> 37 + </Text>
38 - {/* 个人信息 */} 38 + {/* 个人信息 */}
39 - <View style={styles.personContainer}> 39 + <View style={styles.personContainer}>
40 - <Image style={styles.personImg} source={data.image} /> 40 + <Image style={styles.personImg} source={data.image} />
41 - <View style={styles.personRightContainer}> 41 + <View style={styles.personRightContainer}>
42 - <View style={styles.personRTContainer}> 42 + <View style={styles.personRTContainer}>
43 - <Text style={styles.personRTName}>{data.name}</Text> 43 + <Text style={styles.personRTName}>{data.name}</Text>
44 - <Text style={styles.personRTIdentity}>{data.identity}</Text> 44 + <Text style={styles.personRTIdentity}>{data.identity}</Text>
  45 + </View>
  46 + <Text style={styles.personRB}>{data.time}</Text>
45 </View> 47 </View>
46 - <Text style={styles.personRB}>{data.time}</Text>  
47 - </View>  
48 - </View>  
49 - {/* 正文 */}  
50 - <Text style={styles.content}>{data.content}</Text>  
51 - <Text style={styles.copyright}>本文版权归 {data.name} 所有</Text>  
52 - {/* 评论 */}  
53 - <View style={styles.commentsContainer}>  
54 - <View style={styles.commentsHeader}>  
55 - <Text style={styles.commentsHeaderL}>评论</Text>  
56 - <Text style={styles.commentsHeaderR}>  
57 - ( {data.comments.length} )  
58 - </Text>  
59 </View> 48 </View>
60 - {data.comments.map((item, index) => { 49 + {/* 正文 */}
61 - return ( 50 + <Text style={styles.content}>{data.content}</Text>
62 - <View style={styles.itemContainer} key={index}> 51 + <Text style={styles.copyright}>本文版权归 {data.name} 所有</Text>
63 - <Image style={styles.itemIcon} source={item.replayicon} /> 52 + {/* 评论 */}
64 - <View style={styles.itemRightContainer}> 53 + <View style={styles.commentsContainer}>
65 - <View style={styles.itemRightTop}> 54 + <View style={styles.commentsHeader}>
66 - <View style={styles.itemRightTopLeft}> 55 + <Text style={styles.commentsHeaderL}>评论</Text>
67 - <Text style={styles.itemReplyer}>{item.replyer}</Text> 56 + <Text style={styles.commentsHeaderR}>
68 - <Text style={styles.itemWord}>回复</Text> 57 + ( {data.comments.length} )
69 - <Text style={styles.itemBeenreplyer}> 58 + </Text>
70 - {item.beenreplyer} 59 + </View>
71 - </Text> 60 + {data.comments.map((item, index) => {
72 - </View> 61 + return (
73 - <Text style={styles.itemTime}>{item.time}</Text> 62 + <View style={styles.itemContainer} key={index}>
74 - {/* <Image 63 + <Image style={styles.itemIcon} source={item.replayicon} />
  64 + <View style={styles.itemRightContainer}>
  65 + <View style={styles.itemRightTop}>
  66 + <View style={styles.itemRightTopLeft}>
  67 + <Text style={styles.itemReplyer}>{item.replyer}</Text>
  68 + <Text style={styles.itemWord}>回复</Text>
  69 + <Text style={styles.itemBeenreplyer}>
  70 + {item.beenreplyer}
  71 + </Text>
  72 + </View>
  73 + <Text style={styles.itemTime}>{item.time}</Text>
  74 + {/* <Image
75 style={styles.itemRightTopRight} 75 style={styles.itemRightTopRight}
76 source={require("../../assets/tabbar/ic_circle_n.png")} 76 source={require("../../assets/tabbar/ic_circle_n.png")}
77 /> */} 77 /> */}
  78 + </View>
  79 + <Text style={styles.itemRightBottom}>{item.content}</Text>
78 </View> 80 </View>
79 - <Text style={styles.itemRightBottom}>{item.content}</Text>  
80 </View> 81 </View>
81 - </View> 82 + );
82 - ); 83 + })}
83 - })} 84 + </View>
84 - </View> 85 + </ScrollView>
85 - </ScrollView>  
86 {/* 回复框 */} 86 {/* 回复框 */}
87 <View style={styles.sendMsgContaier}> 87 <View style={styles.sendMsgContaier}>
88 <TextInput 88 <TextInput
@@ -99,11 +99,14 @@ export default class Details extends Component { @@ -99,11 +99,14 @@ export default class Details extends Component {
99 enablesReturnKeyAutomatically={true} 99 enablesReturnKeyAutomatically={true}
100 returnKeyType="send" 100 returnKeyType="send"
101 /> 101 />
102 - <TouchableOpacity style={styles.sendButtonContaier} onPress={() => this.sendMsg()}> 102 + <TouchableOpacity
  103 + style={styles.sendButtonContaier}
  104 + onPress={() => this.sendMsg()}
  105 + >
103 <Text style={styles.sendButton}>发送</Text> 106 <Text style={styles.sendButton}>发送</Text>
104 </TouchableOpacity> 107 </TouchableOpacity>
105 </View> 108 </View>
106 - </KeyboardAvoidingView> 109 + </KeyboardAvoidingView>
107 </View> 110 </View>
108 ); 111 );
109 } 112 }
@@ -111,13 +114,11 @@ export default class Details extends Component { @@ -111,13 +114,11 @@ export default class Details extends Component {
111 sendMsg() { 114 sendMsg() {
112 var that = this; 115 var that = this;
113 this.setState({ 116 this.setState({
114 - text: "", 117 + text: ""
115 }); 118 });
116 } 119 }
117 } 120 }
118 121
119 -  
120 -  
121 const styles = StyleSheet.create({ 122 const styles = StyleSheet.create({
122 container: { 123 container: {
123 flex: 1, 124 flex: 1,
@@ -128,12 +129,12 @@ const styles = StyleSheet.create({ @@ -128,12 +129,12 @@ const styles = StyleSheet.create({
128 }, 129 },
129 KAVContainer: { 130 KAVContainer: {
130 flex: 1, 131 flex: 1,
131 - justifyContent: 'center', 132 + justifyContent: "center"
132 // paddingHorizontal: 20, 133 // paddingHorizontal: 20,
133 // paddingTop: 20, 134 // paddingTop: 20,
134 }, 135 },
135 scrollViewContainer: { 136 scrollViewContainer: {
136 - flex: 1, 137 + flex: 1
137 }, 138 },
138 titleText: { 139 titleText: {
139 marginTop: 21, 140 marginTop: 21,
@@ -276,7 +277,7 @@ const styles = StyleSheet.create({ @@ -276,7 +277,7 @@ const styles = StyleSheet.create({
276 borderStyle: "solid", 277 borderStyle: "solid",
277 borderColor: "#E8E8E8", 278 borderColor: "#E8E8E8",
278 borderTopWidth: 1, 279 borderTopWidth: 1,
279 - backgroundColor: "#E6E6E6", 280 + backgroundColor: "#E6E6E6"
280 }, 281 },
281 msgInput: { 282 msgInput: {
282 flex: 1, 283 flex: 1,
@@ -287,20 +288,19 @@ const styles = StyleSheet.create({ @@ -287,20 +288,19 @@ const styles = StyleSheet.create({
287 paddingTop: 8, 288 paddingTop: 8,
288 paddingBottom: 7, 289 paddingBottom: 7,
289 paddingLeft: 13, 290 paddingLeft: 13,
290 - backgroundColor: "white", 291 + backgroundColor: "white"
291 }, 292 },
292 sendButtonContaier: { 293 sendButtonContaier: {
293 // flex: 1, 294 // flex: 1,
294 alignItems: "center", 295 alignItems: "center",
295 - justifyContent: "center", 296 + justifyContent: "center"
296 }, 297 },
297 sendButton: { 298 sendButton: {
298 -  
299 fontSize: 15, 299 fontSize: 15,
300 - marginLeft: 15 , 300 + marginLeft: 15,
301 color: "#1B9341", 301 color: "#1B9341",
302 borderColor: "#E6E6E6", 302 borderColor: "#E6E6E6",
303 borderStyle: "solid", 303 borderStyle: "solid",
304 - borderLeftWidth: 0.5, 304 + borderLeftWidth: 0.5
305 } 305 }
306 }); 306 });
@@ -7,7 +7,8 @@ import { @@ -7,7 +7,8 @@ import {
7 Image, 7 Image,
8 TouchableOpacity, 8 TouchableOpacity,
9 ScrollView, 9 ScrollView,
10 - TextInput 10 + TextInput,
  11 + KeyboardAvoidingView
11 } from "react-native"; 12 } from "react-native";
12 13
13 export default class Login extends Component { 14 export default class Login extends Component {
@@ -15,7 +16,8 @@ export default class Login extends Component { @@ -15,7 +16,8 @@ export default class Login extends Component {
15 super(props); 16 super(props);
16 this.state = { 17 this.state = {
17 phone: "", 18 phone: "",
18 - password: "" 19 + password: "",
  20 + isRegister: false
19 }; 21 };
20 } 22 }
21 componentDidMount() { 23 componentDidMount() {
@@ -24,61 +26,95 @@ export default class Login extends Component { @@ -24,61 +26,95 @@ export default class Login extends Component {
24 render() { 26 render() {
25 return ( 27 return (
26 <View style={styles.container}> 28 <View style={styles.container}>
27 - <Text style={styles.appName}>保护神</Text> 29 + <KeyboardAvoidingView behavior="padding" style={styles.KAVContainer}>
28 - <View style={styles.inputField}> 30 + <Text style={styles.appName}>保护神</Text>
29 - <Image 31 + <View style={styles.inputField}>
30 - style={styles.icon} 32 + <Image
31 - source={require("../assets/login/ic_phone.png")} 33 + style={styles.icon}
32 - /> 34 + source={require("../assets/login/ic_phone.png")}
33 - <TextInput 35 + />
34 - style={styles.textInput} 36 + <TextInput
35 - placeholder="请输入手机号" 37 + style={styles.textInput}
36 - value={this.state.phone} 38 + placeholder="请输入手机号"
37 - onChangeText={phone => this.setState({ phone })} 39 + value={this.state.phone}
38 - autoFocus={true} 40 + onChangeText={phone => this.setState({ phone })}
39 - selectionColor="#1B9341" 41 + autoFocus={true}
40 - clearTextOnFocus={true} 42 + selectionColor="#1B9341"
41 - numberOfLines={1} 43 + clearTextOnFocus={true}
42 - clearButtonMode="always" 44 + numberOfLines={1}
43 - keyboardType="default" 45 + clearButtonMode="always"
44 - /> 46 + keyboardType="default"
45 - </View> 47 + />
46 - <View style={styles.inputField}> 48 + </View>
47 - <Image 49 + <View style={styles.inputField}>
48 - style={styles.icon} 50 + <Image
49 - source={require("../assets/login/ic_password2.png")} 51 + style={styles.icon}
50 - /> 52 + source={require("../assets/login/ic_password2.png")}
51 - <TextInput 53 + />
52 - style={styles.textInput} 54 + <TextInput
53 - placeholder="请输入密码" 55 + style={styles.textInput}
54 - secureTextEntry={true} 56 + placeholder="请输入密码"
55 - value={this.state.password} 57 + secureTextEntry={true}
56 - onChangeText={password => this.setState({ password })} 58 + value={this.state.password}
57 - selectionColor="#1B9341" 59 + onChangeText={password => this.setState({ password })}
58 - clearTextOnFocus={true} 60 + selectionColor="#1B9341"
59 - numberOfLines={1} 61 + clearTextOnFocus={true}
60 - clearButtonMode="always" 62 + numberOfLines={1}
61 - keyboardType="default" 63 + clearButtonMode="always"
62 - /> 64 + keyboardType="default"
63 - </View> 65 + />
64 - {/* <TouchableOpacity style={styles.helpContaier}> 66 + </View>
  67 + {/* <TouchableOpacity style={styles.helpContaier}>
65 <Text style={styles.forgetPassword}>忘记密码？</Text> 68 <Text style={styles.forgetPassword}>忘记密码？</Text>
66 </TouchableOpacity> */} 69 </TouchableOpacity> */}
67 - <TouchableOpacity style={styles.confirmBtn} onPress={() => {this.loginRequest()}}> 70 +
68 - <Text style={styles.login}>登录</Text> 71 + {/* 登录/注册 按钮 */}
69 - </TouchableOpacity> 72 + {!this.state.isRegister ? (
70 - <TouchableOpacity style={styles.registerContaier}> 73 + <TouchableOpacity
71 - <Text style={styles.register}>注册账号</Text> 74 + style={styles.confirmBtnLogin}
72 - </TouchableOpacity> 75 + onPress={() => {
  76 + this.loginRequest();
  77 + }}
  78 + >
  79 + <Text style={styles.confirmText}>登录</Text>
  80 + </TouchableOpacity>
  81 + ) : (
  82 + <TouchableOpacity
  83 + style={styles.confirmBtnRegister}
  84 + onPress={() => {
  85 + this.loginRequest();
  86 + }}
  87 + >
  88 + <Text style={styles.confirmText}>注册</Text>
  89 + </TouchableOpacity>
  90 + )}
  91 +
  92 + {/* 点击进行注册 */}
  93 + {!this.state.isRegister ? (
  94 + <TouchableOpacity
  95 + style={styles.registerContaier}
  96 + onPress={() => this.setState({ isRegister: !this.state.isRegister })}
  97 + >
  98 + <Text style={styles.register}>注册账号</Text>
  99 + </TouchableOpacity>
  100 + ) : (
  101 + <TouchableOpacity
  102 + style={styles.registerContaier}
  103 + onPress={() => this.setState({ isRegister: !this.state.isRegister })}
  104 + >
  105 + <Text style={styles.register}>登录</Text>
  106 + </TouchableOpacity>
  107 + )}
  108 + </KeyboardAvoidingView>
73 </View> 109 </View>
74 ); 110 );
75 } 111 }
76 112
77 loginRequest() { 113 loginRequest() {
78 - if(this.props.loginSuccess) return; 114 + if (this.props.loginSuccess) return;
79 let phone = this.state.phone, 115 let phone = this.state.phone,
80 - password = this.state.password; 116 + password = this.state.password;
81 - if (!(/^1(3|4|5|7|8)\d{9}$/.test(phone))) { 117 + if (!/^1(3|4|5|7|8)\d{9}$/.test(phone)) {
82 alert("请正确输入手机号码"); 118 alert("请正确输入手机号码");
83 return; 119 return;
84 } 120 }
@@ -96,7 +132,6 @@ export default class Login extends Component { @@ -96,7 +132,6 @@ export default class Login extends Component {
96 } 132 }
97 this.props.onLogin(true); 133 this.props.onLogin(true);
98 } 134 }
99 -  
100 } 135 }
101 136
102 const styles = StyleSheet.create({ 137 const styles = StyleSheet.create({
@@ -109,6 +144,10 @@ const styles = StyleSheet.create({ @@ -109,6 +144,10 @@ const styles = StyleSheet.create({
109 paddingLeft: 38, 144 paddingLeft: 38,
110 paddingRight: 38 145 paddingRight: 38
111 }, 146 },
  147 + KAVContainer: {
  148 + flex: 1
  149 + // justifyContent: "center"
  150 + },
112 appName: { 151 appName: {
113 fontSize: 26, 152 fontSize: 26,
114 color: "#030303", 153 color: "#030303",
@@ -134,31 +173,40 @@ const styles = StyleSheet.create({ @@ -134,31 +173,40 @@ const styles = StyleSheet.create({
134 helpContaier: { 173 helpContaier: {
135 flexDirection: "row", 174 flexDirection: "row",
136 justifyContent: "flex-end", 175 justifyContent: "flex-end",
137 - marginTop: 10, 176 + marginTop: 10
138 }, 177 },
139 forgetPassword: { 178 forgetPassword: {
140 color: "#999999", 179 color: "#999999",
141 - fontSize: 14, 180 + fontSize: 14
142 }, 181 },
143 - confirmBtn: { 182 + confirmBtnLogin: {
144 marginTop: 30, 183 marginTop: 30,
145 width: 299, 184 width: 299,
146 height: 45, 185 height: 45,
147 backgroundColor: "#1B9341", 186 backgroundColor: "#1B9341",
148 borderRadius: 5, 187 borderRadius: 5,
149 alignItems: "center", 188 alignItems: "center",
150 - justifyContent: "center", 189 + justifyContent: "center"
  190 + },
  191 + confirmBtnRegister: {
  192 + marginTop: 30,
  193 + width: 299,
  194 + height: 45,
  195 + backgroundColor: "#BBBBBB",
  196 + borderRadius: 5,
  197 + alignItems: "center",
  198 + justifyContent: "center"
151 }, 199 },
152 - login: { 200 + confirmText: {
153 color: "#fff", 201 color: "#fff",
154 - fontSize: 16, 202 + fontSize: 16
155 }, 203 },
156 registerContaier: { 204 registerContaier: {
157 alignItems: "center", 205 alignItems: "center",
158 - justifyContent: "center", 206 + justifyContent: "center"
159 }, 207 },
160 register: { 208 register: {
161 marginTop: 24, 209 marginTop: 24,
162 - color: "#1B9341", 210 + color: "#1B9341"
163 } 211 }
164 }); 212 });
@@ -22,7 +22,6 @@ export default class Main extends Component { @@ -22,7 +22,6 @@ export default class Main extends Component {
22 super(props); 22 super(props);
23 this.state = { 23 this.state = {
24 selectedItem: "home", 24 selectedItem: "home",
25 - selectedTab: "home"  
26 }; 25 };
27 } 26 }
28 27