Use react-native-viewpager module

MelonRice · Oct 10, 2015 · db00ec6 · db00ec6
1 parent 65b9c6f
commit db00ec6
Show file tree

Hide file tree

Showing 9 changed files with 39 additions and 566 deletions.
diff --git a/DefaultViewPageIndicator.js b/DefaultViewPageIndicator.js
diff --git a/ListScreen.js b/ListScreen.js
@@ -22,7 +22,7 @@ var StoryItem = require('./StoryItem');
 var ThemesList = require('./ThemesList');
 var DataRepository = require('./DataRepository');
 var SwipeRefreshLayoutAndroid = require('./SwipeRereshLayout');
-var ViewPager = require('./ViewPager');
+var ViewPager = require('react-native-viewpager');
 
 var API_LATEST_URL = 'http://news.at.zhihu.com/api/4/news/latest';
 var API_HISTORY_URL = 'http://news.at.zhihu.com/api/4/news/before/';

diff --git a/StoryItem.js b/StoryItem.js
@@ -19,7 +19,7 @@ var TITLE_REF = 'title';
 
 var StoryItem = React.createClass({
   updateReadSate: function() {
-    var nativeProps = precomputeStyle({color: '#777777'});
+    var nativeProps = precomputeStyle({color: '#777777'}, ['color']);
     this.refs[TITLE_REF].setNativeProps(nativeProps);
     this.props.onSelect();
   },

diff --git a/StoryScreen.js b/StoryScreen.js
@@ -10,23 +10,24 @@ var {
   Image,
   ToolbarAndroid,
   TouchableHighlight,
+  Animated,
 } = 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';
 var PIXELRATIO = PixelRatio.get();
+var HEADER_SIZE = 200;
 
 var StoryScreen = React.createClass({
   getInitialState: function() {
     return({
       isLoading: false,
       detail: null,
       scrollY: 0,
+      scrollValue: new Animated.Value(0)
     });
   },
   componentDidMount: function() {
@@ -57,8 +58,7 @@ var StoryScreen = React.createClass({
   onWebViewScroll: function(event) {
     //console.log('ScrollY: ' + event);
     var scrollY = -event / PIXELRATIO;
-    var nativeProps = precomputeStyle({transform: [{translateY: scrollY}]});
-    this.refs[REF_HEADER].setNativeProps(nativeProps);
+    this.state.scrollValue.setValue(scrollY);
   },
   render: function() {
     var toolbar = <DetailToolbar navigator={this.props.navigator} style={styles.toolbar}
@@ -74,29 +74,28 @@ var StoryScreen = React.createClass({
       );
     } else {
       if (this.state.detail) {
-        // var headerStyle = {
-        //   height: 200,
-        //   flexDirection: 'row',
-        //   transform: [{translateY: this.state.scrollY}],
-        // };
-        var toolbar
+        var translateY = this.state.scrollValue.interpolate({
+          inputRange: [0, HEADER_SIZE, HEADER_SIZE + 1], outputRange: [0, HEADER_SIZE, HEADER_SIZE]
+        });
         return (
           <View style={styles.container}>
             <MyWebView
               style={styles.content}
               html={this.state.detail.body}
               css={this.state.detail.css[0]}
               onScrollChange={this.onWebViewScroll}/>
-            <Image
-              ref={REF_HEADER}
-              source={{uri: this.state.detail.image}}
-              style={styles.headerImage} >
-              <View style={styles.titleContainer}>
-                <Text style={styles.title}>
-                  {this.props.story.title}
-                </Text>
-              </View>
-            </Image>
+            <Animated.View style={[styles.header, {transform: [{translateY}]}]}>
+              <Image
+                ref={REF_HEADER}
+                source={{uri: this.state.detail.image}}
+                style={styles.headerImage} >
+                <View style={styles.titleContainer}>
+                  <Text style={styles.title}>
+                    {this.props.story.title}
+                  </Text>
+                </View>
+              </Image>
+            </Animated.View>
             {toolbar}
           </View>
         );
@@ -125,16 +124,19 @@ var styles = StyleSheet.create({
     bottom: 0,
     top: 0,
   },
-  headerImage: {
-    height: 200,
-    flexDirection: 'row',
-    backgroundColor: '#DDDDDD',
+  header: {
+    height: HEADER_SIZE,
     position: 'absolute',
     left: 0,
     right: 0,
     bottom: 0,
     top: 56,
   },
+  headerImage: {
+    height: HEADER_SIZE,
+    flexDirection: 'row',
+    backgroundColor: '#DDDDDD',
+  },
   titleContainer: {
     flex: 1,
     alignSelf: 'flex-end',