将mainpage改名为framepage

Kennytian · Mar 29, 2016 · 31e7eaa · 31e7eaa
1 parent c77f9e5
commit 31e7eaa
Show file tree

Hide file tree

Showing 5 changed files with 81 additions and 16 deletions.
diff --git a/README.md b/README.md
@@ -1,16 +1,27 @@
 # 拉一勾
 #### 开发一个仿拉勾的App, 基于react-native 0.21，代码用ES6实现，同时支持Android和iOS.
-依赖项：
+
+### 安装
+```
+npm install
+```
+### 运行
+```
+react-native run-android
+
+or
+
+react-native run-ios
+```
+
+### 依赖项：
 ```
 "dependencies": {
     "react-native": "^0.21.0",
     "react-native-tab-navigator": "^0.2.17",
-    "react-native-viewpager": "^0.2.1",
-    "react-timer-mixin": "^0.13.3"
+    "react-native-viewpager": "^0.2.1"
 }
 ```
-演示链接:
-https://github.com/Kennytian/LagouApp/blob/master/screenshot.gif
 
 ![APP界面](https://raw.githubusercontent.com/Kennytian/LagouApp/master/screenshot.gif)
 

diff --git a/mainpage.js → framepage.js b/mainpage.js → framepage.js
@@ -3,8 +3,9 @@
  */
 'use strict';
 
-import React,{
+import React, {
     Component,
+    Dimensions,
     Image,
     View,
     Platform,
@@ -34,10 +35,16 @@ import Message from './views/message';
 import Discover from  './views/discover';
 import RouteMe from './routeme';
 
-export default class MainPage extends Component {
+let tabBarHidden = false;
+
+export default class FramePage extends Component {
     constructor(props) {
         super(props);
-        this.state = {selectedTab: HOME_TAB}
+        this.state = {
+            selectedTab: HOME_TAB,
+            tabBarShow:true
+        };
+        console.log("0.FramePage-constructor")
     }
 
     _renderBadge(badgeCount) {
@@ -87,10 +94,20 @@ export default class MainPage extends Component {
         return (<View style={styles.container}>{renderView}</View>)
     }
 
+    componentWillMount() {
+        console.log("3.FramePage-componentWillMount()");
+    }
+
     render() {
+        console.log("4.FramePage-render");
+        let {tabBarShow} = this.state;
+        console.log(tabBarShow);
         return (
             <View style={styles.container}>
-                <TabNavigator hidesTabTouch={true} tabBarStyle={styles.tabNav}>
+                <TabNavigator
+                    hidesTabTouch={false}
+                    sceneStyle={{paddingBottom: 0}}
+                    tabBarStyle={tabBarShow ? styles.tabNav : styles.tabNavHide}>
                     {this._renderTabItem(HOME_NORMAL, HOME_PRESS, HOME_TAB, '首页', 0, this._createChildView(HOME_TAB))}
                     {this._renderTabItem(MESSAGE_NORMAL, MESSAGE_PRESS, MESSAGE_TAB, '消息', 1, this._createChildView(MESSAGE_TAB))}
                     {this._renderTabItem(DISCOVER_NORMAL, DISCOVER_PRESS, DISCOVER_TAB, '发现', 0, this._createChildView(DISCOVER_TAB))}
@@ -99,6 +116,32 @@ export default class MainPage extends Component {
             </View>
         )
     }
+
+    componentDidMount() {
+        console.log("5.FramePage-componentDidMount()");
+    }
+
+    componentWillReceiveProps() {
+        console.log("6.FramePage-componentWillReceiveProps()");
+    }
+
+    shouldComponentUpdate() {
+        console.log("7.FramePage-shouldComponentUpdate()");
+        return false;
+    }
+
+    componentWillUpdate() {
+        console.log("8.FramePage-componentWillUpdate");
+    }
+
+    componentDidUpdate() {
+        console.log("9.FramePage-componentDidUpdate");
+    }
+
+    componentWillUnmount() {
+        console.log("10.FramePage-componentWillUnmount");
+        //tabBarHidden = true;
+    }
 }
 
 const styles = StyleSheet.create({
@@ -112,6 +155,11 @@ const styles = StyleSheet.create({
         borderTopWidth: 0.5,
         borderTopColor: '#E8E8E8'
     },
+    tabNavHide: {
+        position: 'absolute',
+        top: Dimensions.get('window').height,
+        height: 0
+    },
     selectedTitleStyle: {
         color: '#11A984'
     },

diff --git a/splash.js b/splash.js
@@ -9,14 +9,14 @@ import React,{
     Image,
 } from 'react-native';
 
-import MainPage from './mainpage';
+import FramePage from './framepage';
 
 export default class SplashScreen extends Component {
     constructor(props) {
         super(props);
         var {navigator} = props;
         setTimeout(()=> {
-            navigator.replace({name: 'MainPage', component: MainPage})
+            navigator.replace({name: 'FramePage', component: FramePage})
         }, 1000);
     }
 

diff --git a/views/home.js b/views/home.js
@@ -56,7 +56,7 @@ export default class Home extends Component {
     }
 
     _selectJob(job:Object) {
-        let {navigator}=this.props;
+        let {navigator} = this.props;
         if (navigator) {
             navigator.push({
                 name: 'JobDetail',

diff --git a/views/home/job-detail.js b/views/home/job-detail.js
@@ -3,7 +3,7 @@
  */
 'use strict';
 
-import React,{
+import React, {
     Component,
     StyleSheet,
     Navigator,
@@ -14,18 +14,22 @@ import React,{
 } from 'react-native';
 
 export default class JobDetail extends Component {
-    constructor(props){
+    constructor(props) {
         super(props);
         this.state = {job: null};
+        console.log("0.JobDetail-constructor(props)")
     }
 
     componentWillMount() {
+        console.log("3.JobDetail-componentWillMount()")
+
         if (React.Platform.OS === 'android') {
             React.BackAndroid.addEventListener('hardwareBackPress', ()=>this._pressButton());
         }
     }
 
     componentWillUnmount() {
+        console.log("10.JobDetail-componentWillUnmount()")
         if (React.Platform.OS === 'android') {
             React.BackAndroid.removeEventListener('hardwareBackPress', ()=>this._pressButton());
         }
@@ -42,10 +46,12 @@ export default class JobDetail extends Component {
     };
 
     render() {
-        let { job } = this.props;
+        console.log("4.JobDetail-render()")
+        let {job} = this.props;
         return (
             <View style={{flex: 1}}>
-                <View style={{padding: 10,marginTop:20,justifyContent: 'center',alignItems: 'center',flexDirection:'row'}}>
+                <View
+                    style={{padding: 10,marginTop:20,justifyContent: 'center',alignItems: 'center',flexDirection:'row'}}>
                     <TouchableOpacity onPress={()=>this._pressButton()}>
                         <Image source={require('../../images/icon_back.png')} style={{width:30,height:30}}/>
                     </TouchableOpacity>