stack in tab navigation

flycatki · Mar 31, 2017 · 51aee0c · 51aee0c
1 parent 2323717
commit 51aee0c
Show file tree

Hide file tree

Showing 15 changed files with 70 additions and 22 deletions.
diff --git a/app/components/header/header.js b/app/components/header/header.js
@@ -7,7 +7,7 @@ import {
   View,
   Text,
   StyleSheet,
-  Dimensions,
+  TouchableNativeFeedback,
 } from 'react-native';
 
 import Icon from 'react-native-vector-icons/Ionicons';
@@ -25,10 +25,12 @@ export default class Header extends Component {
     return (
       <View style={styles.container}>
         <View style={styles.headerWrapper}>
-          <View style={styles.locationContainer}>
-            <Text style={styles.locationText}>大连</Text>
-            <Icon name="md-arrow-dropdown" size={20} color="#fff" style={{marginLeft: 3}} />
-          </View>
+          <TouchableNativeFeedback onPress={() => this.props.navigation.navigate('City')}>
+            <View style={styles.locationContainer}>
+              <Text style={styles.locationText}>大连</Text>
+              <Icon name="md-arrow-dropdown" size={20} color="#fff" style={{marginLeft: 3}} />
+            </View>
+          </TouchableNativeFeedback>
           <View style={styles.searchContainer}>
             <Icon name="ios-search-outline" size={20} color="#666" />
             <Text style={styles.searchText}>挑好房，上安居客</Text>

diff --git a/app/components/wrapper.js b/app/components/wrapper.js
@@ -7,15 +7,31 @@ import {
   TabNavigator,
 } from 'react-navigation';
 
-import HomePage from '../pages/Home';
+import HomeTab from '../pages/Home';
 import ChatPage from '../pages/Chat';
 import RecommendPage from '../pages/Recommend';
 import MyPage from '../pages/My';
 
+import Ionicons from 'react-native-vector-icons/Ionicons';
+
 const Wrapper = TabNavigator({
   Home: {
-    screen: HomePage,
+    screen: HomeTab,
     path: '',
+    navigationOptions: {
+      tabBar: {
+        icon: ({ tintColor, focused }) => (
+          <Ionicons
+            name={focused ? 'ios-home' : 'ios-home-outline'}
+            size={26}
+            style={{ color: tintColor }}
+          />
+        )
+      },
+      header: {
+        visible: false,
+      },
+    },
   },
   Chat: {
     screen: ChatPage,

diff --git a/app/images/h_1.png b/app/images/h_1.png
diff --git a/app/images/h_2.png b/app/images/h_2.png
diff --git a/app/images/h_3.png b/app/images/h_3.png
diff --git a/app/images/h_4.png b/app/images/h_4.png
diff --git a/app/images/h_5.png b/app/images/h_5.png
diff --git a/app/images/h_6.png b/app/images/h_6.png
diff --git a/app/images/h_7.png b/app/images/h_7.png
diff --git a/app/images/h_8.png b/app/images/h_8.png
diff --git a/app/images/hengda1.png b/app/images/hengda1.png
diff --git a/app/images/huafu1.png b/app/images/huafu1.png
diff --git a/app/images/youhui.png b/app/images/youhui.png
diff --git a/app/pages/City.js b/app/pages/City.js
@@ -0,0 +1,23 @@
+/**
+ * Created by jiangyh on 17-3-30.
+ */
+import React, { Component } from 'react';
+
+import {
+  View,
+  Text
+} from 'react-native';
+
+export default class CityPage extends Component {
+  constructor(props) {
+    super(props);
+  }
+
+  render () {
+    return (
+      <View>
+        <Text>city page</Text>
+      </View>
+    )
+  }
+}
diff --git a/app/pages/Home.js b/app/pages/Home.js
@@ -11,39 +11,46 @@ import {
 } from 'react-native';
 
 import Header from '../components/header/header';
+import CityPage from '../pages/City';
 
-import Ionicons from 'react-native-vector-icons/Ionicons';
+import { StackNavigator, } from 'react-navigation';
 
-export default class HomePage extends Component {
+class HomePage extends Component {
   constructor(props) {
     super(props);
   }
 
-  static navigationOptions = {
-    tabBar: {
-      icon: ({ tintColor, focused }) => (
-        <Ionicons
-          name={focused ? 'ios-home' : 'ios-home-outline'}
-          size={26}
-          style={{ color: tintColor }}
-        />
-      )
-    }
-  };
-
   render() {
     return (
       <View style={{flex: 1}}>
         <ScrollView style={styles.scrollView}>
           <View style={styles.container}>
-            <Header/>
+            <Header navigation={this.props.navigation}/>
           </View>
         </ScrollView>
       </View>
     )
   }
 };
 
+const HomeTab = StackNavigator({
+  Home: {
+    screen: HomePage,
+    path: '/',
+    navigationOptions: {
+      header: {
+        visible: false,
+      }
+    }
+  },
+  City: {
+    path: 'city',
+    screen: CityPage,
+  }
+});
+
+export default HomeTab;
+
 const styles = StyleSheet.create({
   container: {
     flex: 1,