1. react-native-tab-view 更新版本，适用于用户详情页

2. 日记详情页点不开问题修复

package-lock.json

@@ -10872,6 +10872,14 @@
         "react-native-root-siblings": "^3.0.0"
       }
     },
+    "react-native-tab-view": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npm.taobao.org/react-native-tab-view/download/react-native-tab-view-1.3.0.tgz",
+      "integrity": "sha1-gi/PFOmh0I01SDOMIXxxajFjfhw=",
+      "requires": {
+        "prop-types": "^15.6.1"
+      }
+    },
     "react-native-vector-icons": {
       "version": "4.5.0",
       "resolved": "http://registry.npm.taobao.org/react-native-vector-icons/download/react-native-vector-icons-4.5.0.tgz",

package.json

@@ -18,6 +18,7 @@
     "react-native-iphone-x-helper": "^1.0.2",
     "react-native-navigation": "^2.18.5",
     "react-native-root-toast": "^3.0.0",
+    "react-native-tab-view": "^1.3.0",
     "react-native-vector-icons": "^4.5.0"
   },
   "devDependencies": {

src/component/diary/diaryList.js

@@ -6,6 +6,7 @@ import {
     FlatList,
     Text, View
 } from 'react-native';
+import {Navigation} from 'react-native-navigation';
 import {Divider} from "react-native-elements";
 
 import Color from '../../style/color';
@@ -47,8 +48,6 @@ export default class DiaryList extends Component {
         this.setState({hasMore: false, refreshing: true, refreshFailed: false});
         this.dataSource.refresh(loadMore)
                 .then(result => {
-                    console.log('diaryList refresh:', result);
-
                     if(!result) {
                         throw {
                             message: 'refresh no result'
@@ -72,9 +71,11 @@ export default class DiaryList extends Component {
 
                 }).catch(e => {
                     if (e.code === 401) {
+                        /*
                         this.props.navigator.showModal({
                             screen: "App"
                         });
+                        */
                     }
 
                     this.setState({
@@ -99,16 +100,6 @@ export default class DiaryList extends Component {
         this.refresh(true);
     }
 
-    _onDiaryPress(diary) {
-        
-        this.props.navigator.push({
-            screen: 'DiaryDetail',
-            title: '日记详情',
-            passProps: { diary: diary }
-        });
-        
-    }
-
     render() {
         return (
             <View style={localStyle.container}>
@@ -124,7 +115,7 @@ export default class DiaryList extends Component {
 
                     renderItem={({item}) => {
                         return (
-                            <Touchable onPress={() => this._onDiaryPress(item)}>
+                            <Touchable onPress={() => this.props.onDiaryPress(item)}>
                                 <DiaryBrief diary={item}></DiaryBrief>
                             </Touchable>
                         )

src/page/FollowPage.js

@@ -1,5 +1,6 @@
 import React, {Component} from 'react';
 import {StyleSheet, Text, View} from 'react-native';
+import {Navigation} from 'react-native-navigation';
 
 import Api from '../util/api'
 
@@ -14,6 +15,19 @@ export default class FollowPage extends Component {
         this.dataSource = new FollowListData();
     }
 
+    _onDiaryPress(diary) {
+        console.log('componentId:', this.props.componentId, diary);
+        Navigation.push(this.props.componentId, {
+            component: {
+                name: 'DiaryDetail',
+                passProps: {
+                    diary: diary
+                }
+            }
+        });
+        
+    }
+
     renderHeader() {
         return (
             <View style={localStyle.header}>
@@ -28,6 +42,7 @@ export default class FollowPage extends Component {
                 <DiaryList ref={(r) => this.list = r}
                     dataSource={this.dataSource}
                     header={this.renderHeader.bind(this)}
+                    onDiaryPress={this._onDiaryPress.bind(this)}
 
                     navigator={this.props.navigator}
 

src/page/HomePage.js

@@ -1,5 +1,6 @@
 import React, {Component} from 'react';
 import {StyleSheet, Text, View} from 'react-native';
+import {Navigation} from 'react-native-navigation';
 
 import Api from '../util/api';
 
@@ -14,6 +15,19 @@ export default class HomePage extends Component {
         this.dataSource = new HomeListData();
     }
 
+    _onDiaryPress(diary) {
+        console.log('componentId:', this.props.componentId, diary);
+        Navigation.push(this.props.componentId, {
+            component: {
+                name: 'DiaryDetail',
+                passProps: {
+                    diary: diary
+                }
+            }
+        });
+        
+    }
+
     renderHeader() {
         return (
             <View style={localStyle.header}>
@@ -28,6 +42,7 @@ export default class HomePage extends Component {
                 <DiaryList ref={(r) => this.list = r}
                     dataSource={this.dataSource}
                     header={this.renderHeader.bind(this)}
+                    onDiaryPress={this._onDiaryPress.bind(this)}
 
                     navigator={this.props.navigator}
 

src/page/UserPage.js

@@ -1,33 +1,108 @@
 import React, {Component} from 'react';
-import {Platform, StyleSheet, Text, View} from 'react-native';
+import {StyleSheet, Text, View, Animated} from 'react-native';
+import {
+  PagerScroll,
+  TabView,
+  TabBar,
+  SceneMap
+} from 'react-native-tab-view';
+
+import Api from '../util/api';
+import Color from '../style/color';
 
 
 export default class UserPage extends Component {
 
+    constructor(props) {
+        super(props);
+        this.state = {
+            index: 0,
+            routes: [
+                { key: 'userInfo', title: '简介' },
+                { key: 'diary', title: '日记' },
+                { key: 'notebook', title: '日记本' }
+            ]
+        };
+    }
+
+    _renderLabel = props => ({route}) => {
+        let routes = props.navigationState.routes;
+        let index = props.navigationState.index;
+
+        let color = route.key == routes[index].key ? Color.primary : '#222';
+        
+        return (
+            <Animated.Text
+                style={[localStyle.label, {color}]}>
+                {route.title}
+            </Animated.Text>
+        );
+    };
+
+    _renderTabBar = props => {
+        return (
+          <TabBar
+            {...props}
+            style={localStyle.tabBar}
+            indicatorStyle={localStyle.indicator}
+
+            renderLabel={this._renderLabel(props)}
+          >
+          </TabBar>
+        );
+    };
+
+    _renderScene = SceneMap({
+        userInfo: () => <View style={localStyle.container}><Text style={localStyle.welcome}>user info !</Text></View>,
+        diary: () => <View style={localStyle.container}><Text style={localStyle.welcome}>diary !</Text></View>,
+        notebook: () => <View style={localStyle.container}><Text style={localStyle.welcome}>notebook !</Text></View>
+    });
+
     render() {
       return (
-        <View style={styles.container}>
+          <TabView style={localStyle.container}
-          <Text style={styles.welcome}>User Page !</Text>
+              initialLayout={{
-        </View>
+                  height: 0,
+                  width: Api.DEVICE_WINDOW.width
+              }}
+
+              renderPager={(props) => <PagerScroll {...props}/>} /* android */
+
+              renderTabBar={this._renderTabBar}
+              renderScene={this._renderScene}
+
+              navigationState={this.state}
+              onIndexChange={index => {
+                  this.setState({index});
+              }}
+              
+          />
       );
     }
 }
 
-const styles = StyleSheet.create({
+const localStyle = StyleSheet.create({
-  container: {
+    
-    flex: 1,
+    welcome: {
-    justifyContent: 'center',
+      fontSize: 20,
-    alignItems: 'center',
+      textAlign: 'center',
-    backgroundColor: '#F5FCFF',
+      marginTop: 40
-  },
+    },
-  welcome: {
+
-    fontSize: 20,
+
-    textAlign: 'center',
+    container: {
-    margin: 10,
+        flex: 1
-  },
+    },
-  instructions: {
+    tabBar: {
-    textAlign: 'center',
+        backgroundColor: '#fff',
-    color: '#333333',
+        paddingTop: 10,
-    marginBottom: 5,
+        paddingBottom: 5
-  },
+    },
+    indicator: {
+        backgroundColor: Color.primary
+    },
+    label: {
+        fontSize: 13,
+        fontWeight: 'bold'
+    }
 });