Add titlebar for story screen

DetailToolbar.js

@@ -0,0 +1,167 @@
+'use strict';
+
+var React = require('react-native');
+var {
+  AppRegistry,
+  PixelRatio,
+  StyleSheet,
+  Text,
+  View,
+  Image,
+  TouchableWithoutFeedback,
+  ToastAndroid,
+} = React;
+
+var SwitchAndroid = require('SwitchAndroid');
+var ToolbarAndroid = require('ToolbarAndroid');
+
+var API_STROY_EXTRA = 'http://news-at.zhihu.com/api/4/story-extra/';
+
+var DetailToolbar = React.createClass({
+  getInitialState: function() {
+    return({
+      isLoading: true,
+      extra: null,
+    });
+  },
+  componentDidMount: function() {
+    this.fetchStroyExtra();
+  },
+  fetchStroyExtra: function() {
+    fetch(API_STROY_EXTRA + this.props.story.id)
+      .then((response) => response.json())
+      .catch((error) => {
+        this.setState({
+          isLoading: false,
+          extra: null,
+        });
+      })
+      .then((responseData) => {
+        this.setState({
+          isLoading: false,
+          extra: responseData,
+        });
+      })
+      .done();
+  },
+  _onPressBackButton: function() {
+    if (this.props.navigator) {
+      this.props.navigator.pop();
+    }
+  },
+  _onPressShareButton: function() {
+    // TODO:
+    ToastAndroid.show('分享', ToastAndroid.SHORT);
+  },
+  _onPressCollectButton: function() {
+    // TODO:
+    ToastAndroid.show('收藏', ToastAndroid.SHORT);
+  },
+  _onPressCommentButton: function() {
+    // TODO:
+    ToastAndroid.show('评论', ToastAndroid.SHORT);
+  },
+  _onPressPriseButton: function() {
+    // TODO:
+    ToastAndroid.show('赞', ToastAndroid.SHORT);
+  },
+  render: function() {
+    return(
+      <View {...this.props}>
+        <View style={styles.actionsContainer}>
+          <TouchableWithoutFeedback onPress={this._onPressBackButton}
+            style={styles.actionItem}>
+            <Image
+              style={styles.backIcon}
+              source={require('image!ic_back_white')}
+              resizeMode='contain' />
+          </TouchableWithoutFeedback>
+          <View style={{flex: 1}} />
+          <TouchableWithoutFeedback onPress={this._onPressShareButton}
+            style={styles.actionItem}>
+            <Image
+              style={styles.actionIcon}
+              source={require('image!ic_share_white')}
+              resizeMode='contain' />
+          </TouchableWithoutFeedback>
+          <TouchableWithoutFeedback onPress={this._onPressCollectButton}
+            style={styles.actionItem}>
+            <Image
+              style={styles.actionIcon}
+              source={require('image!ic_collect_white')}
+              resizeMode='contain' />
+          </TouchableWithoutFeedback>
+          <TouchableWithoutFeedback onPress={this._onPressCommentButton}
+            style={styles.actionItem}>
+            <View style={{flexDirection: 'row', alignItems: 'center'}}>
+              <Image
+                style={styles.actionIconWithCount}
+                source={require('image!ic_comment_white')}
+                resizeMode='contain' />
+              <Text style={styles.count}>
+                {this.state.isLoading ? '...' : this.state.extra.comments}
+              </Text>
+            </View>
+          </TouchableWithoutFeedback>
+          <TouchableWithoutFeedback onPress={this._onPressPraiseButton}
+            style={styles.actionItem}>
+            <View style={{flexDirection: 'row', alignItems: 'center', marginRight: 16}}>
+              <Image
+                style={styles.actionIconWithCount}
+                source={require('image!ic_praise_white')}
+                resizeMode='contain' />
+              <Text style={styles.count}>
+                {this.state.isLoading ? '...' : this.state.extra.popularity}
+              </Text>
+            </View>
+          </TouchableWithoutFeedback>
+        </View>
+
+      </View>
+      // <ToolbarAndroid
+      //   navIcon={require('image!ic_back_white')}
+      //   onIconClicked={this.props.navigator.pop}
+      //   titleColor="white"
+      //   actions={[]} >
+      // </ToolbarAndroid>
+    );
+  },
+
+});
+
+var styles = StyleSheet.create({
+  actionsContainer: {
+    height: 56,
+    flexDirection: 'row',
+    alignItems: 'center',
+  },
+  backIcon: {
+    width: 32,
+    height: 32,
+    marginLeft: 16,
+    marginRight: 16,
+  },
+  actionItem: {
+    height: 56,
+    alignItems: 'center',
+
+  },
+  actionIcon: {
+    width: 32,
+    height: 32,
+    marginLeft: 5,
+    marginRight: 5,
+  },
+  actionIconWithCount: {
+    width: 32,
+    height: 32,
+    marginLeft: 5,
+  },
+  count: {
+    fontSize: 16,
+    color: 'white',
+    marginRight: 5,
+  },
+});
+
+module.exports = DetailToolbar;

ListScreen.js

@@ -154,9 +154,6 @@ var ListScreen = React.createClass({
   render: function() {
     var content = this.state.dataSource.getRowCount() === 0 ?
       <View style={styles.container}>
-        <Text>
-          This is the list Screen.
-        </Text>
       </View> :
       <ListView
         ref="listview"

StoryScreen.js

@@ -8,11 +8,14 @@ var {
   Text,
   View,
   Image,
+  ToolbarAndroid,
+  TouchableHighlight,
 } = React;
 
 var precomputeStyle = require('precomputeStyle');
 
 var MyWebView = require('./WebView');
+var DetailToolbar = require('./DetailToolbar');
 
 var BASE_URL = 'http://news.at.zhihu.com/api/4/news/';
 var REF_HEADER = 'header';
@@ -58,13 +61,15 @@ var StoryScreen = React.createClass({
     this.refs[REF_HEADER].setNativeProps(nativeProps);
   },
   render: function() {
-    var url = BASE_URL + this.props.story.id;
+    var toolbar = <DetailToolbar navigator={this.props.navigator} style={styles.toolbar}
+      story={this.props.story}/>;
     if (this.state.isLoading) {
       return (
         <View style={[styles.container, styles.center]}>
           <Text>
             正在加载...
           </Text>
+          {toolbar}
         </View>
       );
     } else {
@@ -74,6 +79,7 @@ var StoryScreen = React.createClass({
         //   flexDirection: 'row',
         //   transform: [{translateY: this.state.scrollY}],
         // };
+        var toolbar
         return (
           <View style={styles.container}>
             <MyWebView
@@ -91,6 +97,7 @@ var StoryScreen = React.createClass({
                 </Text>
               </View>
             </Image>
+            {toolbar}
           </View>
         );
       } else {
@@ -99,6 +106,7 @@ var StoryScreen = React.createClass({
             <Text>
               加载失败
             </Text>
+            {toolbar}
           </View>
         );
       }
@@ -108,10 +116,24 @@ var StoryScreen = React.createClass({
 });
 
 var styles = StyleSheet.create({
+  toolbar: {
+    backgroundColor: '#00a2ed',
+    height: 56,
+    position: 'absolute',
+    left: 0,
+    right: 0,
+    bottom: 0,
+    top: 0,
+  },
   headerImage: {
     height: 200,
     flexDirection: 'row',
     backgroundColor: '#DDDDDD',
+    position: 'absolute',
+    left: 0,
+    right: 0,
+    bottom: 0,
+    top: 56,
   },
   titleContainer: {
     flex: 1,
@@ -139,7 +161,7 @@ var styles = StyleSheet.create({
     left: 0,
     right: 0,
     bottom: 0,
-    top:0,
+    top:56,
   },
 });
 

index.android.js

@@ -51,12 +51,6 @@ var RouteMapper = function(route, navigationOperations, onComponentRef) {
   } else if (route.name === 'story') {
     return (
       <View style={styles.container}>
-        <ToolbarAndroid
-          navIcon={require('image!ic_back_white')}
-          onIconClicked={navigationOperations.pop}
-          titleColor="white"
-          style={styles.toolbar}
-          actions={[]}/>
         <StoryScreen
           style={{flex: 1}}
           navigator={navigationOperations}