我也不知道我改了啥啊

@@ -4,29 +4,30 @@
  * @flow
  */
 
-import React, { Component } from 'react';
-import {
-  AppRegistry,
-  StyleSheet,
-  Text,
-  View
-} from 'react-native';
-import Main from './src/pages/main';
+import React, { Component } from "react";
+import { AppRegistry, StyleSheet, Text, View } from "react-native";
+import Main from "./src/pages/main";
 
 export default class ProtectGod extends Component {
- constructor(props) {
-  super(props);
-  this.state = {
-    isLogin: true
+  constructor(props) {
+    super(props);
+    this.state = {
+      isLogin: true,
+      selectedItem: "home"
+    };
   }
- }
   render() {
-
-    console.log("看看这个登录state",this.state.isLogin);
+    console.log("看看这个登录state", this.state.isLogin);
     return (
-      <Main 
+      <Main
         loginSuccess={this.state.isLogin}
-        onLogin={ (isLogin) => {this.setState({isLogin})}}
+        selectedItem={this.state.selectedItem}
+        onLogin={isLogin => {
+          this.setState({
+            isLogin: isLogin,
+            selectedItem: "home"
+          });
+        }}
       />
     );
   }
@@ -35,20 +36,20 @@ export default class ProtectGod extends Component {
 const styles = StyleSheet.create({
   container: {
     flex: 1,
-    justifyContent: 'center',
-    alignItems: 'center',
-    backgroundColor: '#F5FCFF',
+    justifyContent: "center",
+    alignItems: "center",
+    backgroundColor: "#F5FCFF"
   },
   welcome: {
     fontSize: 20,
-    textAlign: 'center',
-    margin: 10,
+    textAlign: "center",
+    margin: 10
   },
   instructions: {
-    textAlign: 'center',
-    color: '#333333',
-    marginBottom: 5,
-  },
+    textAlign: "center",
+    color: "#333333",
+    marginBottom: 5
+  }
 });
 
-AppRegistry.registerComponent('ProtectGod', () => ProtectGod);
+AppRegistry.registerComponent("ProtectGod", () => ProtectGod);

@@ -8,7 +8,7 @@ import {
   TouchableOpacity,
   Image,
   TextInput,
-  KeyboardAvoidingView,
+  KeyboardAvoidingView
 } from "react-native";
 
 export default class Details extends Component {
@@ -28,61 +28,61 @@ export default class Details extends Component {
     return (
       <View style={styles.container}>
         <KeyboardAvoidingView behavior="padding" style={styles.KAVContainer}>
-        <ScrollView
-          style={styles.scrollViewContainer}
-          automaticallyAdjustContentInsets={false}
-        >
-          <Text style={styles.titleText} numberOfLines={3}>
-            {data.title}
-          </Text>
-          {/* 个人信息 */}
-          <View style={styles.personContainer}>
-            <Image style={styles.personImg} source={data.image} />
-            <View style={styles.personRightContainer}>
-              <View style={styles.personRTContainer}>
-                <Text style={styles.personRTName}>{data.name}</Text>
-                <Text style={styles.personRTIdentity}>{data.identity}</Text>
+          <ScrollView
+            style={styles.scrollViewContainer}
+            automaticallyAdjustContentInsets={false}
+          >
+            <Text style={styles.titleText} numberOfLines={3}>
+              {data.title}
+            </Text>
+            {/* 个人信息 */}
+            <View style={styles.personContainer}>
+              <Image style={styles.personImg} source={data.image} />
+              <View style={styles.personRightContainer}>
+                <View style={styles.personRTContainer}>
+                  <Text style={styles.personRTName}>{data.name}</Text>
+                  <Text style={styles.personRTIdentity}>{data.identity}</Text>
+                </View>
+                <Text style={styles.personRB}>{data.time}</Text>
               </View>
-              <Text style={styles.personRB}>{data.time}</Text>
-            </View>
-          </View>
-          {/* 正文 */}
-          <Text style={styles.content}>{data.content}</Text>
-          <Text style={styles.copyright}>本文版权归 {data.name} 所有</Text>
-          {/* 评论 */}
-          <View style={styles.commentsContainer}>
-            <View style={styles.commentsHeader}>
-              <Text style={styles.commentsHeaderL}>评论</Text>
-              <Text style={styles.commentsHeaderR}>
-                ( {data.comments.length} )
-              </Text>
             </View>
-            {data.comments.map((item, index) => {
-              return (
-                <View style={styles.itemContainer} key={index}>
-                  <Image style={styles.itemIcon} source={item.replayicon} />
-                  <View style={styles.itemRightContainer}>
-                    <View style={styles.itemRightTop}>
-                      <View style={styles.itemRightTopLeft}>
-                        <Text style={styles.itemReplyer}>{item.replyer}</Text>
-                        <Text style={styles.itemWord}>回复</Text>
-                        <Text style={styles.itemBeenreplyer}>
-                          {item.beenreplyer}
-                        </Text>
-                      </View>
-                      <Text style={styles.itemTime}>{item.time}</Text>
-                      {/* <Image
+            {/* 正文 */}
+            <Text style={styles.content}>{data.content}</Text>
+            <Text style={styles.copyright}>本文版权归 {data.name} 所有</Text>
+            {/* 评论 */}
+            <View style={styles.commentsContainer}>
+              <View style={styles.commentsHeader}>
+                <Text style={styles.commentsHeaderL}>评论</Text>
+                <Text style={styles.commentsHeaderR}>
+                  ( {data.comments.length} )
+                </Text>
+              </View>
+              {data.comments.map((item, index) => {
+                return (
+                  <View style={styles.itemContainer} key={index}>
+                    <Image style={styles.itemIcon} source={item.replayicon} />
+                    <View style={styles.itemRightContainer}>
+                      <View style={styles.itemRightTop}>
+                        <View style={styles.itemRightTopLeft}>
+                          <Text style={styles.itemReplyer}>{item.replyer}</Text>
+                          <Text style={styles.itemWord}>回复</Text>
+                          <Text style={styles.itemBeenreplyer}>
+                            {item.beenreplyer}
+                          </Text>
+                        </View>
+                        <Text style={styles.itemTime}>{item.time}</Text>
+                        {/* <Image
                         style={styles.itemRightTopRight}
                         source={require("../../assets/tabbar/ic_circle_n.png")}
                       /> */}
+                      </View>
+                      <Text style={styles.itemRightBottom}>{item.content}</Text>
                     </View>
-                    <Text style={styles.itemRightBottom}>{item.content}</Text>
                   </View>
-                </View>
-              );
-            })}
-          </View>
-        </ScrollView>
+                );
+              })}
+            </View>
+          </ScrollView>
           {/* 回复框 */}
           <View style={styles.sendMsgContaier}>
             <TextInput
@@ -99,11 +99,14 @@ export default class Details extends Component {
               enablesReturnKeyAutomatically={true}
               returnKeyType="send"
             />
-            <TouchableOpacity style={styles.sendButtonContaier} onPress={() => this.sendMsg()}>
+            <TouchableOpacity
+              style={styles.sendButtonContaier}
+              onPress={() => this.sendMsg()}
+            >
               <Text style={styles.sendButton}>发送</Text>
             </TouchableOpacity>
           </View>
-          </KeyboardAvoidingView>
+        </KeyboardAvoidingView>
       </View>
     );
   }
@@ -111,13 +114,11 @@ export default class Details extends Component {
   sendMsg() {
     var that = this;
     this.setState({
-      text: "",
+      text: ""
     });
   }
 }
 
-  
-
 const styles = StyleSheet.create({
   container: {
     flex: 1,
@@ -128,12 +129,12 @@ const styles = StyleSheet.create({
   },
   KAVContainer: {
     flex: 1,
-    justifyContent: 'center',
+    justifyContent: "center"
     // paddingHorizontal: 20,
     // paddingTop: 20,
   },
   scrollViewContainer: {
-    flex: 1,
+    flex: 1
   },
   titleText: {
     marginTop: 21,
@@ -276,7 +277,7 @@ const styles = StyleSheet.create({
     borderStyle: "solid",
     borderColor: "#E8E8E8",
     borderTopWidth: 1,
-    backgroundColor: "#E6E6E6",
+    backgroundColor: "#E6E6E6"
   },
   msgInput: {
     flex: 1,
@@ -287,20 +288,19 @@ const styles = StyleSheet.create({
     paddingTop: 8,
     paddingBottom: 7,
     paddingLeft: 13,
-    backgroundColor: "white",
+    backgroundColor: "white"
   },
   sendButtonContaier: {
     // flex: 1,
     alignItems: "center",
-    justifyContent: "center",
+    justifyContent: "center"
   },
   sendButton: {
-    
     fontSize: 15,
-    marginLeft: 15  ,
+    marginLeft: 15,
     color: "#1B9341",
     borderColor: "#E6E6E6",
     borderStyle: "solid",
-    borderLeftWidth: 0.5,
+    borderLeftWidth: 0.5
   }
 });

@@ -7,7 +7,8 @@ import {
   Image,
   TouchableOpacity,
   ScrollView,
-  TextInput
+  TextInput,
+  KeyboardAvoidingView
 } from "react-native";
 
 export default class Login extends Component {
@@ -15,7 +16,8 @@ export default class Login extends Component {
     super(props);
     this.state = {
       phone: "",
-      password: ""
+      password: "",
+      isRegister: false
     };
   }
   componentDidMount() {
@@ -24,61 +26,95 @@ export default class Login extends Component {
   render() {
     return (
       <View style={styles.container}>
-        <Text style={styles.appName}>保护神</Text>
-        <View style={styles.inputField}>
-          <Image
-            style={styles.icon}
-            source={require("../assets/login/ic_phone.png")}
-          />
-          <TextInput
-            style={styles.textInput}
-            placeholder="请输入手机号"
-            value={this.state.phone}
-            onChangeText={phone => this.setState({ phone })}
-            autoFocus={true}
-            selectionColor="#1B9341"
-            clearTextOnFocus={true}
-            numberOfLines={1}
-            clearButtonMode="always"
-            keyboardType="default"
-          />
-        </View>
-        <View style={styles.inputField}>
-          <Image
-            style={styles.icon}
-            source={require("../assets/login/ic_password2.png")}
-          />
-          <TextInput
-            style={styles.textInput}
-            placeholder="请输入密码"
-            secureTextEntry={true}
-            value={this.state.password}
-            onChangeText={password => this.setState({ password })}
-            selectionColor="#1B9341"
-            clearTextOnFocus={true}
-            numberOfLines={1}
-            clearButtonMode="always"
-            keyboardType="default"
-          />
-        </View>
-        {/* <TouchableOpacity style={styles.helpContaier}>
+        <KeyboardAvoidingView behavior="padding" style={styles.KAVContainer}>
+          <Text style={styles.appName}>保护神</Text>
+          <View style={styles.inputField}>
+            <Image
+              style={styles.icon}
+              source={require("../assets/login/ic_phone.png")}
+            />
+            <TextInput
+              style={styles.textInput}
+              placeholder="请输入手机号"
+              value={this.state.phone}
+              onChangeText={phone => this.setState({ phone })}
+              autoFocus={true}
+              selectionColor="#1B9341"
+              clearTextOnFocus={true}
+              numberOfLines={1}
+              clearButtonMode="always"
+              keyboardType="default"
+            />
+          </View>
+          <View style={styles.inputField}>
+            <Image
+              style={styles.icon}
+              source={require("../assets/login/ic_password2.png")}
+            />
+            <TextInput
+              style={styles.textInput}
+              placeholder="请输入密码"
+              secureTextEntry={true}
+              value={this.state.password}
+              onChangeText={password => this.setState({ password })}
+              selectionColor="#1B9341"
+              clearTextOnFocus={true}
+              numberOfLines={1}
+              clearButtonMode="always"
+              keyboardType="default"
+            />
+          </View>
+          {/* <TouchableOpacity style={styles.helpContaier}>
           <Text style={styles.forgetPassword}>忘记密码？</Text>
         </TouchableOpacity> */}
-        <TouchableOpacity style={styles.confirmBtn} onPress={() => {this.loginRequest()}}>
-          <Text style={styles.login}>登录</Text>
-        </TouchableOpacity>
-        <TouchableOpacity style={styles.registerContaier}>
-          <Text style={styles.register}>注册账号</Text>
-        </TouchableOpacity>
+
+          {/* 登录/注册 按钮 */}
+          {!this.state.isRegister ? (
+            <TouchableOpacity
+              style={styles.confirmBtnLogin}
+              onPress={() => {
+                this.loginRequest();
+              }}
+            >
+              <Text style={styles.confirmText}>登录</Text>
+            </TouchableOpacity>
+          ) : (
+            <TouchableOpacity
+              style={styles.confirmBtnRegister}
+              onPress={() => {
+                this.loginRequest();
+              }}
+            >
+              <Text style={styles.confirmText}>注册</Text>
+            </TouchableOpacity>
+          )}
+
+          {/* 点击进行注册 */}
+          {!this.state.isRegister ? (
+            <TouchableOpacity
+              style={styles.registerContaier}
+              onPress={() => this.setState({ isRegister: !this.state.isRegister })}
+            >
+              <Text style={styles.register}>注册账号</Text>
+            </TouchableOpacity>
+          ) : (
+            <TouchableOpacity
+              style={styles.registerContaier}
+              onPress={() => this.setState({ isRegister: !this.state.isRegister })}
+            >
+              <Text style={styles.register}>登录</Text>
+            </TouchableOpacity>
+          )}
+        </KeyboardAvoidingView>
       </View>
     );
   }
 
   loginRequest() {
-    if(this.props.loginSuccess) return;
+    if (this.props.loginSuccess) return;
     let phone = this.state.phone,
-        password = this.state.password;
-    if (!(/^1(3|4|5|7|8)\d{9}$/.test(phone))) {
+      password = this.state.password;
+    if (!/^1(3|4|5|7|8)\d{9}$/.test(phone)) {
       alert("请正确输入手机号码");
       return;
     }
@@ -96,7 +132,6 @@ export default class Login extends Component {
     }
     this.props.onLogin(true);
   }
-
 }
 
 const styles = StyleSheet.create({
@@ -109,6 +144,10 @@ const styles = StyleSheet.create({
     paddingLeft: 38,
     paddingRight: 38
   },
+  KAVContainer: {
+    flex: 1
+    // justifyContent: "center"
+  },
   appName: {
     fontSize: 26,
     color: "#030303",
@@ -134,31 +173,40 @@ const styles = StyleSheet.create({
   helpContaier: {
     flexDirection: "row",
     justifyContent: "flex-end",
-    marginTop: 10,
+    marginTop: 10
   },
   forgetPassword: {
     color: "#999999",
-    fontSize: 14,
+    fontSize: 14
   },
-  confirmBtn: {
+  confirmBtnLogin: {
     marginTop: 30,
     width: 299,
     height: 45,
     backgroundColor: "#1B9341",
     borderRadius: 5,
     alignItems: "center",
-    justifyContent: "center",
+    justifyContent: "center"
+  },
+  confirmBtnRegister: {
+    marginTop: 30,
+    width: 299,
+    height: 45,
+    backgroundColor: "#BBBBBB",
+    borderRadius: 5,
+    alignItems: "center",
+    justifyContent: "center"
   },
-  login: {
+  confirmText: {
     color: "#fff",
-    fontSize: 16,
+    fontSize: 16
   },
   registerContaier: {
     alignItems: "center",
-    justifyContent: "center",
+    justifyContent: "center"
   },
   register: {
     marginTop: 24,
-    color: "#1B9341",
+    color: "#1B9341"
   }
 });

@@ -22,7 +22,6 @@ export default class Main extends Component {
     super(props);
     this.state = {
       selectedItem: "home",
-      selectedTab: "home"
     };
   }