abstract Nav Component

Author: soliury

app/components/Nav.js

@@ -0,0 +1,92 @@
+var React = require('react-native')
+
+var window = require('../util/window')
+var { width, height } = window.get()
+
+
+var {
+    Component,
+    View,
+    Text,
+    StyleSheet,
+    TouchableOpacity
+    } = React
+
+
+class Nav extends Component {
+    constructor(props) {
+        super(props)
+    }
+
+
+    _renderNavContent() {
+        var navs = this.props.navs || {}
+
+        return ['Left', 'Center', 'Right'].map((position)=> {
+            var nav = navs[position]
+            if (nav) {
+                return (
+                    <TouchableOpacity
+                        onPress={nav.onPress}
+                        >
+                        <Text style={[styles.navItem,styles['nav'+position]]}>
+                            {nav.text}
+                        </Text>
+                    </TouchableOpacity>
+                )
+            }
+            return (
+                <View style={[styles.navItem,styles['nav'+position]]}>
+                </View>
+            )
+        })
+    }
+
+
+    render() {
+        return (
+            <View
+                ref={view=>this.nav=view}
+                style={styles.nav}>
+
+                {this._renderNavContent()}
+
+            </View>
+        )
+    }
+}
+
+var navHeight = 55
+
+var styles = StyleSheet.create({
+    nav: {
+        height: navHeight,
+        width: width,
+        borderBottomColor: 'rgba(0,0,0,0.03)',
+        borderBottomWidth: 1,
+        flexDirection: 'row',
+        justifyContent: 'center',
+        alignItems: 'center'
+    },
+    navItem: {
+        color: 'rgba(0,0,0,0.7)',
+        fontSize: 16
+    },
+    navLeft: {
+        textAlign: 'left',
+        paddingLeft: 15,
+        flex: 1
+    },
+    navRight: {
+        textAlign: 'right',
+        paddingRight: 15,
+        flex: 1
+    },
+    navCenter: {
+        textAlign: 'center',
+        flex: 2
+    }
+})
+
+
+module.exports = Nav

app/containers/Comments.js

@@ -13,6 +13,7 @@ var markdown = require("markdown").markdown
 var Return = require('../components/overlay/Return')
 var CommentHtml = require('../components/htmlRender/CommentHtml')
 var CommentUp = require('../components/comment/CommentUp')
+var Nav = require('../components/Nav')
 
 var TopicService = require('../services/TopicService')
 var genColor = require('../util/genColor')
@@ -222,35 +223,13 @@ class Comments extends Component {
     }
 
 
-    _onReturnPress() {
-        this.props.router.pop()
-    }
-
-
-    _onReturnToTopic() {
-        this.props.router.toTopic({
-            topic: this.topic
-        })
-    }
-
-
     _onAuthorImgPress(authorName) {
         this.props.router.toUser({
             userName: authorName
         })
     }
 
 
-    _onCommentTitlePress() {
-        this._listView.setNativeProps({
-            contentOffset: {
-                x: 0,
-                y: 0
-            }
-        })
-    }
-
-
     renderRow(comment, sectionID, rowID, highlightRow) {
         var authorName = comment.author.loginname
         var domain = config.domain
@@ -431,47 +410,48 @@ class Comments extends Component {
 
     render() {
         var count = this.state.ds.getRowCount()
-        var returnToTopic = (
-            <TouchableHighlight
-                onPress={this._onReturnToTopic.bind(this)}
-                underlayColor='rgba(0,0,0,0.1)'
-                style={styles.navToTopic}>
-                <Text style={styles.navReturnText}>
-                    正文
-                </Text>
-            </TouchableHighlight>
-        )
 
-        return (
-            <View style={styles.container}>
-                <View
-                    ref={view=>this.nav=view}
-                    style={styles.nav}>
-                    <TouchableHighlight
-                        onPress={this._onReturnPress.bind(this)}
-                        underlayColor='rgba(0,0,0,0.1)'
-                        style={styles.navReturn}>
-                        <Text style={styles.navReturnText}>
-                            返回
-                        </Text>
-                    </TouchableHighlight>
+        var router = this.props.router
 
-                    <TouchableOpacity
-                        onPress={this._onCommentTitlePress.bind(this)}
-                        style={styles.navTitle}>
-                        <Text style={styles.titleText}>
-                            评论
-                            <Text style={styles.countText}>
-                                {' ' + count.toString()}
-                            </Text>
-                        </Text>
-                    </TouchableOpacity>
+        var navs = {
+            Left: {
+                text: '返回',
+                onPress: ()=> {
+                    router.pop()
+                }
+            },
+            Center: {
+                text: '评论 ' + count,
+                onPress: ()=> {
+                    this._listView.setNativeProps({
+                        contentOffset: {
+                            x: 0,
+                            y: 0
+                        }
+                    })
+                }
+            }
+        }
 
-                    {
-                        (this.state.didFocus && this.props.reply && this.state.isLoaded) ? returnToTopic : null
+        if (this.state.didFocus && this.props.reply && this.state.isLoaded) {
+            navs = {
+                ...navs,
+                Right: {
+                    text: '正文',
+                    onPress: ()=> {
+                        router.toTopic({
+                            topic: this.topic
+                        })
                     }
+                }
+            }
+        }
 
-                </View>
+        return (
+            <View style={styles.container}>
+                <Nav
+                    navs={navs}
+                    ></Nav>
 
                 <View
                     ref={view=>this.commentsView=view}
@@ -507,47 +487,12 @@ var styles = StyleSheet.create({
         backgroundColor: 'white',
         height: height
     },
-    nav: {
-        height: navHeight,
-        width: width,
-        borderBottomColor: 'rgba(0,0,0,0.03)',
-        borderBottomWidth: 1,
-        flexDirection: 'row',
-        justifyContent: 'center',
-        alignItems: 'center'
-    },
-
-    navReturn: {
-        height: navHeight,
-        position: 'absolute',
-        left: 0,
-        top: 0,
-        paddingLeft: 15,
-        paddingRight: 15
-    },
-
-    navToTopic: {
-        height: navHeight,
-        position: 'absolute',
-        right: 0,
-        top: 0,
-        paddingLeft: 15,
-        paddingRight: 15
-    },
-    navReturnText: {
-        lineHeight: navHeight - 20,
-        fontSize: 16
-    },
 
     titleText: {
         color: 'rgba(0,0,0,0.7)',
         fontSize: 16
     },
 
-    countText: {
-        color: 'rgba(0,0,0,0.45)'
-    },
-
     comments: {
         //marginTop: 20,
         width: width,