more page

Author: wangdicoder

js/assets/test.jpg

@@ -28,23 +28,25 @@ export default class NavigationBar extends Component{
     render(){
         const {title, leftBtnIcon, leftBtnPress, rightBtnIcon, rightBtnPress, isBackBtnOnLeft} = this.props;
         return (
-            <View style={styles.toolbar}>
-                <View style={styles.fixedCell}>
-                    {leftBtnIcon ?
-                        <IconButton icon={leftBtnIcon} onPress={leftBtnPress} isBackBtnOnLeft={isBackBtnOnLeft}/>
-                        :
-                        null
-                    }
-                </View>
-                <View style={styles.centerCell}>
-                    <Text style={styles.title}>{title}</Text>
-                </View>
-                <View style={styles.fixedCell}>
-                    {rightBtnIcon ?
-                        <IconButton icon={rightBtnIcon} onPress={rightBtnPress}/>
-                        :
-                        null
-                    }
+            <View style={styles.container}>
+                <View style={styles.toolbar}>
+                    <View style={styles.fixedCell}>
+                        {leftBtnIcon ?
+                            <IconButton icon={leftBtnIcon} onPress={leftBtnPress} isBackBtnOnLeft={isBackBtnOnLeft}/>
+                            :
+                            null
+                        }
+                    </View>
+                    <View style={styles.centerCell}>
+                        <Text style={styles.title}>{title}</Text>
+                    </View>
+                    <View style={styles.fixedCell}>
+                        {rightBtnIcon ?
+                            <IconButton icon={rightBtnIcon} onPress={rightBtnPress}/>
+                            :
+                            null
+                        }
+                    </View>
                 </View>
             </View>
         );
@@ -91,14 +93,18 @@ class IconButton extends Component{
 }
 
 const styles = StyleSheet.create({
+    container: { //in order to display the shadow on home tab
+        height: theme.toolbar.height + px2dp(4),
+        width: theme.screenWidth
+    },
     toolbar: {
         height: theme.toolbar.height,
         backgroundColor: theme.toolbar.barColor,
         flexDirection: 'row',
         paddingTop: Platform.OS === 'android' ? 0 : px2dp(6),
-        elevation: 8,
+        elevation: 3,
         shadowColor: 'rgb(0,0,0)',
-        shadowOffset: {height: 5, width: 1},
+        shadowOffset: {height: 3, width: 1},
         shadowOpacity: 0.25,
         shadowRadius: 3
     },

js/components/NavigationBar.js

@@ -4,13 +4,55 @@
 'use strict';
 
 import React, {Component} from 'react';
-import {Text} from 'react-native';
+import {StyleSheet, View, Text, ScrollView, Image} from 'react-native';
+import ParallaxScrollView from 'react-native-parallax-scroll-view';
+import theme from '../../constants/theme';
+import NavigationBar from '../../components/NavigationBar';
 
 export default class HomeFragment extends Component{
+    constructor(props){
+        super(props);
+        this.state = {
+            opacity: 1,
+
+        };
+    }
 
     render(){
         return(
-            <Text>dsdsds</Text>
+            <View style={styles.container}>
+                <View style={[styles.toolbar, {opacity: this.state.opacity}]}>
+                    <NavigationBar title="今日Gank"/>
+                </View>
+                <ScrollView
+                    onScroll={this._onScroll.bind(this)}>
+                    <Image source={require('../../assets/test.jpg')} resizeMode="cover" style={{height: 300, width: theme.screenWidth}}/>
+                    <View style={styles.scrollContents}>
+
+                    </View>
+                </ScrollView>
+            </View>
         );
     }
-}
+
+    _onScroll(){
+
+    }
+
+}
+
+const styles = StyleSheet.create({
+    container: {
+        flex: 1
+    },
+    toolbar: {
+        position: 'absolute',
+        width: theme.screenWidth,
+        left: 0,
+        top: 0,
+        elevation: 8
+    },
+    scrollContents: {
+        height: theme.screenHeight,
+    }
+});

js/containers/HomeTab/index.js

@@ -27,7 +27,7 @@ class BottomTabBar extends Component{
     constructor(props){
         super(props);
         this.state = {
-            selectedTab: 'me'
+            selectedTab: 'home'
         };
         this.tabNames = ['首页', '发现', '收藏', '更多'];
     }

js/containers/MainPage.js

@@ -57,11 +57,10 @@ const styles = StyleSheet.create({
     },
     intro: {
         height: 100,
-        marginTop: px2dp(18),
         backgroundColor: '#fff'
     },
     block: {
-        marginTop: px2dp(13),
+        marginTop: px2dp(12),
         borderBottomColor: theme.segment.color,
         borderBottomWidth: theme.segment.width,
         borderTopColor: theme.segment.color,

js/containers/MoreTab/index.js

@@ -9,6 +9,7 @@
   "dependencies": {
     "react": "15.3.2",
     "react-native": "0.37.0",
+    "react-native-parallax-scroll-view": "^0.19.0",
     "react-native-scrollable-tab-view": "^0.6.0",
     "react-native-tab-navigator": "^0.3.3",
     "react-native-vector-icons": "^3.0.0",