From 3ebcf18c317bf2b3987de53c0f8a706917c84b6e Mon Sep 17 00:00:00 2001
From: horizon0514 <huangsy@huangsydeMacBook-Air.local>
Date: Thu, 10 Dec 2015 23:12:24 +0800
Subject: [PATCH 1/6] =?UTF-8?q?list=20view=20=E6=9C=89bug?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 DataWarehouse.js               |   4 +-
 MainScreen.js                  | 167 +++++++++++++++++----------------
 index.ios.js                   |   2 +-
 ios/RNZhihuDaily/AppDelegate.m |   2 +-
 4 files changed, 93 insertions(+), 82 deletions(-)

diff --git a/DataWarehouse.js b/DataWarehouse.js
index c01aa66..9d28d4d 100644
--- a/DataWarehouse.js
+++ b/DataWarehouse.js
@@ -1,9 +1,11 @@
 'use strict';
 var API_COVER_URL = 'http://news-at.zhihu.com/api/4/start-image/1080*1776';
 var API_NEWS_URL = 'http://news-at.zhihu.com/api/4/news/latest';
+var API_NEWS_BEFORE = 'http://news.at.zhihu.com/api/4/news/before/'
 const DataWarehouse = {
 	cover: API_COVER_URL,
-	news: API_NEWS_URL
+	news: API_NEWS_URL,
+	before: API_NEWS_BEFORE
 }
 
 module.exports = DataWarehouse;
\ No newline at end of file
diff --git a/MainScreen.js b/MainScreen.js
index 3af88e9..20ec393 100644
--- a/MainScreen.js
+++ b/MainScreen.js
@@ -18,101 +18,71 @@ var {
   ActivityIndicatorIOS,
 } = React;
 
-let requestUrl = DataWarehouse.news;
 
 
-// class MainScreen extends React.Component{
-//   constructor(){//ES6 风格
-//     super();
-//     this.ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2});
-//     return {
-//       dataSource: this.ds.cloneWithRows([]),
-//     };
-//   }
-//   componentDidMount(){
-//     //this._fetchData();
-//     this.setState({dataSource:this.ds.cloneWithRows(["Row 1", "Row 2", "Row 3", "Row 4"])});
 
-//   }
-  
-//   _fetchData(){
-//     fetch(requestUrl)
-//       .then(response => response.json())
-//       .then(response => {
-//         console.log(response);
-//         this.setState({
-//           dataSource: this.ds.cloneWithRows(response.stories)
-//         });
-        
-//       }
-//     );//setState之后会自动调用render函数
-//   }
-//   renderRow(rowData, sectionID, rowID) {
-//     console.log(rowData);
-//     return (
-//       <TouchableHighlight  underlayColor='#dddddd'>
-//         <View>
-//            <View style={styles.rowContainer}>
-//              <Image style={styles.thumb} source={require('./img/splash.png')}/>
-//              <View style={styles.textContainer}>
-//               <Text style={styles.title}>{rowData.title}</Text>
-//               <Text style={styles.desc}></Text>
-//              </View>
-//            </View>
-//            <View style={styles.separator}/>
-           
-//         </View>
-//       </TouchableHighlight>       
-
-//     );
-//   }
- 
-//   render() {
-//     console.log('render listview');
-//     return (
-//       <View style={styles.container}>
-//           <ListView
-//             dataSource={this.state.dataSource}
-//             renderRow={this.renderRow.bind(this)}/>
-//       </View> 
-//     );
-//   }
-// };
 class MainScreen extends Component {
  
   constructor(props) {
     super(props);
+
     this.state = {
-      isLoading : true
-    }
-    
-    this.ds = new ListView.DataSource(
-      {rowHasChanged: (r1, r2) => r1.id !== r2.id});
-    this.state = {
-      dataSource: this.ds.cloneWithRows([{images:[]}])
+      currentDay: 0,
+      dataBlob: {},
+      sectionId: [],
+      dataSource: new ListView.DataSource({
+        rowHasChanged: (r1,r2)=>r1 !== r2,
+        sectionHeaderHasChanged: (s1,s2)=>s1!==s2
+      }),
+      loaded: false
     };
   }
   componentDidMount(){
-    this._fetchData();
+    this._fetchData(this.state.currentDay);
     
   }
   
-  _fetchData(){
-    fetch(requestUrl)
+  
+  _fetchData(date){
+    var url = '';
+    if(date===0){//第一次请求数据
+      url = DataWarehouse.news;
+    } else {
+      url += DataWarehouse.before+date;
+    }
+    var tempDataBlob = this.state.dataBlob;
+    var sectionId = this.state.sectionId;
+    var dataBlob = this.state.dataBlob;
+    
+    fetch(url)
       .then(response => response.json())
       .then(response => {
-        console.log(response);
+        var date = response.date;
+        var newDataBlob = {};
+        var newSectionId = sectionId.slice();
+        newSectionId.push(date);
+        
+        dataBlob[date] = response.stories;
+        newDataBlob = JSON.parse(JSON.stringify(dataBlob));
+
+        
+        console.log(newSectionId);
         this.setState({
-          dataSource: this.ds.cloneWithRows(response.stories),
-          isLoading: false
+          currentDay: date,
+          dataBlob: newDataBlob,
+          sectionId: newSectionId,
+          dataSource: this.state.dataSource.cloneWithRowsAndSections(this.state.dataBlob,this.state.sectionId,null),
+          loaded: true
         });
         
-      }
-    );//setState之后会自动调用render函数
+      })
+      
+      
+    
   }
-
+  
   renderRow(rowData, sectionID, rowID) {
-    console.log(rowData);
+    //console.log(rowData);
     return (
       <TouchableHighlight  underlayColor='#dddddd'>
         <View>
@@ -130,20 +100,48 @@ class MainScreen extends Component {
 
     );
   }
- 
+  renderSectionHeader(sectionData,sectionID){
+    console.log(sectionID);
+    return (
+      <View style={styles.section}>
+        <Text style={styles.sectionText}>{sectionID}</Text>
+      </View>  
+    );
+  }
+  renderFooter(){
+    return (
+      <View>
+        <ActivityIndicatorIOS
+          animating={true}
+          size={'large'} />
+      </View>);
+  }
+  onEndReached(){
+    //listview到达底部，需要继续fetchData
+    //console.log(this.state.currentDay);
+    this._fetchData(this.state.currentDay);
+
+  }
   render() {
+    
     var spinner = <ActivityIndicatorIOS style={styles.centering} hidden='false' size='large'/>;
           
-    if(this.state.isLoading){
+    if(!this.state.loaded){
+      console.log('render spinner');
       return(
-        <View style={styles.container}>spinner</View>
+        <View style={styles.container}>{spinner}</View>
         );
     } else {
+      console.log('render listview');
+      console.log(this.state.dataSource);
       return (
         <View style={styles.container}>
             <ListView
               dataSource={this.state.dataSource}
-              renderRow={this.renderRow.bind(this)}/>
+              renderSectionHeader={this.renderSectionHeader}
+              renderFooter={this.renderFooter}
+              onEndReached={this.onEndReached.bind(this)}
+              renderRow={this.renderRow}/>
           </View> 
       );
     }
@@ -153,7 +151,8 @@ class MainScreen extends Component {
 
 var styles = StyleSheet.create({
   container: {
-    flex: 1
+    flex: 1,
+    
   },
   rowContainer: {
       flexDirection: 'row',
@@ -186,6 +185,16 @@ var styles = StyleSheet.create({
       left: 100,
       top: 200
     },
+    section: {
+      height: 10,
+      backgroundColor: 'blue',
+      flex: 1,
+    },
+    sectionText: {
+      textAlign: 'center',
+      color: '#ffffff',
+      fontSize: 12,
+    }
 });
 
 module.exports = MainScreen;
\ No newline at end of file
diff --git a/index.ios.js b/index.ios.js
index f47545a..c53d28f 100644
--- a/index.ios.js
+++ b/index.ios.js
@@ -66,7 +66,7 @@ var RNZhihuDaily = React.createClass({
       this.setState({
         splashed: true
       });
-    },3000)  
+    },1000)  
   },
   _renderScreen: function(route,navigator){
     return (
diff --git a/ios/RNZhihuDaily/AppDelegate.m b/ios/RNZhihuDaily/AppDelegate.m
index 57cdfcb..9daadb6 100644
--- a/ios/RNZhihuDaily/AppDelegate.m
+++ b/ios/RNZhihuDaily/AppDelegate.m
@@ -39,7 +39,7 @@ - (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(
    * generated by "Bundle React Native code and images" build step.
    */
 
-//   jsCodeLocation = [[NSBundle mainBundle] URLForResource:@"main" withExtension:@"jsbundle"];
+//jsCodeLocation = [[NSBundle mainBundle] URLForResource:@"main" withExtension:@"jsbundle"];
 
   RCTRootView *rootView = [[RCTRootView alloc] initWithBundleURL:jsCodeLocation
                                                       moduleName:@"RNZhihuDaily"

From 54977ff0ff35d072de579bf1b126990ffb077e90 Mon Sep 17 00:00:00 2001
From: horizon0514 <huangsy@huangsydeMacBook-Air.local>
Date: Thu, 10 Dec 2015 23:33:06 +0800
Subject: [PATCH 2/6] not set the navbar

---
 MainScreen.js | 22 +++++++++++++---------
 package.json  |  1 +
 2 files changed, 14 insertions(+), 9 deletions(-)

diff --git a/MainScreen.js b/MainScreen.js
index 20ec393..7d003ff 100644
--- a/MainScreen.js
+++ b/MainScreen.js
@@ -6,6 +6,7 @@
 
 var React = require('react-native');
 var DataWarehouse = require('./DataWarehouse');
+var NavigationBar = require('react-native-navbar');
 
 var {
   StyleSheet,
@@ -15,6 +16,7 @@ var {
   View,
   Image,
   Component,
+  TabBarIOS,
   ActivityIndicatorIOS,
 } = React;
 
@@ -133,16 +135,18 @@ class MainScreen extends Component {
         );
     } else {
       console.log('render listview');
-      console.log(this.state.dataSource);
+      
+
       return (
-        <View style={styles.container}>
-            <ListView
-              dataSource={this.state.dataSource}
-              renderSectionHeader={this.renderSectionHeader}
-              renderFooter={this.renderFooter}
-              onEndReached={this.onEndReached.bind(this)}
-              renderRow={this.renderRow}/>
-          </View> 
+          <View style={styles.container}>
+              <ListView
+                dataSource={this.state.dataSource}
+                renderSectionHeader={this.renderSectionHeader}
+                renderFooter={this.renderFooter}
+                onEndReached={this.onEndReached.bind(this)}
+                renderRow={this.renderRow}/>
+          </View>
+        
       );
     }
   }
diff --git a/package.json b/package.json
index 1375776..a3f1d61 100644
--- a/package.json
+++ b/package.json
@@ -7,6 +7,7 @@
   },
   "dependencies": {
     "react-native": "^0.16.0",
+    "react-native-navbar": "^1.1.1",
     "react-native-refresher": "^0.1.1"
   }
 }

From ff8825511ed9a02b7340cfe38b203df6aa5f9b75 Mon Sep 17 00:00:00 2001
From: horizon0514 <huangsy@huangsydeMacBook-Air.local>
Date: Sat, 12 Dec 2015 01:56:57 +0800
Subject: [PATCH 3/6] add story webview,fix css --todo

---
 DataWarehouse.js                           |   6 +-
 MainScreen.js                              |  59 ++++++----
 Story.js                                   | 125 +++++++++++++++++++++
 index.ios.js                               |  29 +++--
 ios/RNZhihuDaily.xcodeproj/project.pbxproj |  72 +++++++++---
 ios/RNZhihuDaily/AppDelegate.m             |   2 +-
 package.json                               |   1 +
 7 files changed, 248 insertions(+), 46 deletions(-)
 create mode 100644 Story.js

diff --git a/DataWarehouse.js b/DataWarehouse.js
index 9d28d4d..fd19780 100644
--- a/DataWarehouse.js
+++ b/DataWarehouse.js
@@ -1,11 +1,13 @@
 'use strict';
 var API_COVER_URL = 'http://news-at.zhihu.com/api/4/start-image/1080*1776';
 var API_NEWS_URL = 'http://news-at.zhihu.com/api/4/news/latest';
-var API_NEWS_BEFORE = 'http://news.at.zhihu.com/api/4/news/before/'
+var API_NEWS_BEFORE = 'http://news.at.zhihu.com/api/4/news/before/';
+var API_STORY = 'http://news-at.zhihu.com/api/4/news/';
 const DataWarehouse = {
 	cover: API_COVER_URL,
 	news: API_NEWS_URL,
-	before: API_NEWS_BEFORE
+	before: API_NEWS_BEFORE,
+	story: API_STORY,
 }
 
 module.exports = DataWarehouse;
\ No newline at end of file
diff --git a/MainScreen.js b/MainScreen.js
index 7d003ff..f192273 100644
--- a/MainScreen.js
+++ b/MainScreen.js
@@ -7,7 +7,7 @@
 var React = require('react-native');
 var DataWarehouse = require('./DataWarehouse');
 var NavigationBar = require('react-native-navbar');
-
+var StoryView = require('./Story');
 var {
   StyleSheet,
   ListView,
@@ -18,6 +18,7 @@ var {
   Component,
   TabBarIOS,
   ActivityIndicatorIOS,
+  StatusBarIOS,
 } = React;
 
 
@@ -41,6 +42,7 @@ class MainScreen extends Component {
   }
   componentDidMount(){
     this._fetchData(this.state.currentDay);
+    StatusBarIOS.setStyle(1);
     
   }
   
@@ -67,8 +69,6 @@ class MainScreen extends Component {
         dataBlob[date] = response.stories;
         newDataBlob = JSON.parse(JSON.stringify(dataBlob));
 
-        
-        console.log(newSectionId);
         this.setState({
           currentDay: date,
           dataBlob: newDataBlob,
@@ -81,13 +81,21 @@ class MainScreen extends Component {
       
       
     
+  }
+  rowPressed(id){
+    //跳转到story页面
+    this.props.navigator.push({
+      name: '',
+      component: StoryView,
+      passProps: {storyId: id}
+    });
   }
   
   renderRow(rowData, sectionID, rowID) {
-    //console.log(rowData);
+    console.log(rowData);
     return (
-      <TouchableHighlight  underlayColor='#dddddd'>
-        <View>
+         <TouchableHighlight  onPress={()=>this.rowPressed(rowData.id)} underlayColor='#dddddd'>
+          <View>
            <View style={styles.rowContainer}>
              <Image style={styles.thumb} source={{uri: rowData.images[0]}}/>
              <View style={styles.textContainer}>
@@ -96,17 +104,21 @@ class MainScreen extends Component {
              </View>
            </View>
            <View style={styles.separator}/>
-           
-        </View>
-      </TouchableHighlight>       
+           </View>
+      </TouchableHighlight>     
 
     );
   }
   renderSectionHeader(sectionData,sectionID){
-    console.log(sectionID);
+    //sectionID ＝ 20140101
+    var  dateStr = [sectionID.slice(0,4),'-',sectionID.slice(4,6),'-',sectionID.slice(6)].join('');
+    var dateObj = new Date(dateStr);
+    var month = dateObj.getUTCMonth() + 1;
+    var day = dateObj.getUTCDate();
+    var days = ['星期天','星期一','星期二','星期三','星期四','星期五','星期六'];
     return (
       <View style={styles.section}>
-        <Text style={styles.sectionText}>{sectionID}</Text>
+        <Text style={styles.sectionText}>{month+'月'+day+'日 '+ days[dateObj.getDay()]}</Text>
       </View>  
     );
   }
@@ -129,22 +141,19 @@ class MainScreen extends Component {
     var spinner = <ActivityIndicatorIOS style={styles.centering} hidden='false' size='large'/>;
           
     if(!this.state.loaded){
-      console.log('render spinner');
       return(
         <View style={styles.container}>{spinner}</View>
         );
     } else {
-      console.log('render listview');
-      
-
       return (
           <View style={styles.container}>
+              <View style={styles.header}></View>
               <ListView
                 dataSource={this.state.dataSource}
-                renderSectionHeader={this.renderSectionHeader}
-                renderFooter={this.renderFooter}
+                renderSectionHeader={this.renderSectionHeader.bind(this)}
+                renderFooter={this.renderFooter.bind(this)}
                 onEndReached={this.onEndReached.bind(this)}
-                renderRow={this.renderRow}/>
+                renderRow={this.renderRow.bind(this)}/>
           </View>
         
       );
@@ -157,6 +166,11 @@ var styles = StyleSheet.create({
   container: {
     flex: 1,
     
+  },
+  header: {
+    height: 20,
+    backgroundColor: '0766C7',
+
   },
   rowContainer: {
       flexDirection: 'row',
@@ -190,14 +204,15 @@ var styles = StyleSheet.create({
       top: 200
     },
     section: {
-      height: 10,
-      backgroundColor: 'blue',
+      height: 30,
+      backgroundColor: '#0766C7',
       flex: 1,
     },
     sectionText: {
-      textAlign: 'center',
       color: '#ffffff',
-      fontSize: 12,
+      marginTop: 10,
+      textAlign: 'center',
+
     }
 });
 
diff --git a/Story.js b/Story.js
new file mode 100644
index 0000000..1596651
--- /dev/null
+++ b/Story.js
@@ -0,0 +1,125 @@
+'use strict';
+var React = require('react-native');
+var dataWarehouse = require('./DataWarehouse');
+var HTMLWebView = require('react-native-html-webview');
+
+var {
+	View,
+	StyleSheet,
+	Text,
+	NavigatorIOS,
+	Image,
+	Component,
+	WebView,
+	ScrollView,
+	Animated,
+	ActivityIndicatorIOS,
+
+} = React;
+
+class Story extends Component{
+	constructor(props){
+		super(props);
+		this.state={
+			loaded: false
+		};
+		
+	}
+
+	componentDidMount(){
+		console.log(this.props.storyId);
+		//id为文章的id
+		this._fetchData(this.props.storyId);
+	}
+
+	_fetchData(id){
+		var url = dataWarehouse.story + id;
+		fetch(url)
+			.then(response => response.json())
+			.then(json => this._handleResponse(json))
+			.catch(err=>{
+				this.setState({
+					loaded: true,
+					message: 'timeout'
+				});
+			});
+
+	}
+
+	_handleResponse(json){
+		//handle the html
+		
+		var body = json.body;
+		var image = json.image;
+		var css = json.css[0];
+		var html = '<!DOCTYPE html><html><head><link rel="stylesheet" type="text/css" href="'
+          + css
+          + '" /></head><body>' + body
+          + '</body></html>';
+
+		this.setState({
+			loaded: true,
+			message: '',
+			html: html,
+			image: image,
+		});
+
+	}
+
+	render(){
+		console.log('render story');
+		
+		if(this.state.loaded){
+			var html = this.state.html;
+			var image = this.state.image;
+			return (
+		    	<ScrollView>		
+			      <View>
+			      	<Image style={styles.headerImg} source={{uri: image}}/>
+			        <HTMLWebView
+			        	style={styles.content}
+			            html={html}
+			            autoHeight={true}
+			            scalesPageToFit={true}
+			        />
+			       	
+			      </View>
+			    </ScrollView>
+	    	);
+		} else {
+			return (
+		      <View>
+		        <ActivityIndicatorIOS
+		          animating={true}
+		          size={'large'} />
+		      </View>
+		    );
+		}
+	}
+}
+
+var styles = StyleSheet.create({
+	container:{
+		flex: 1,
+		padding: 5,
+		marginTop: 15,
+		alignItems: 'center',
+		justifyContent: 'center'
+	},
+	
+	headerImg: {
+		//width: 320,
+		height: 200,
+		top: 0,
+		right: 0,
+		left: 0
+	},
+	
+	content: {
+	    flex: 1,
+	    //marginTop: 36,
+	},
+});
+
+
+module.exports = Story;
\ No newline at end of file
diff --git a/index.ios.js b/index.ios.js
index c53d28f..c634c4d 100644
--- a/index.ios.js
+++ b/index.ios.js
@@ -7,6 +7,7 @@
 var React = require('react-native');
 var DataWarehouse = require('./DataWarehouse');
 var MainScreen = require('./MainScreen');
+var HTMLWebView = require('react-native-html-webview');
 
 var {
   AppRegistry,
@@ -17,6 +18,7 @@ var {
   Animated,
   Dimensions,
   View,
+  NavigatorIOS,
 } = React;
 
 let requestUrl = DataWarehouse.cover;
@@ -86,15 +88,28 @@ var RNZhihuDaily = React.createClass({
       text = '';
     }
     if(this.state.splashed){
-      //显示listView
-      return(
+       return (
         <Navigator
-          style={styles.container}
-          initialRoute={{
-            title: '首页'
+          initialRoute={{name: 'MainScreen', component: MainScreen}}
+          configureScene={() => {
+              return Navigator.SceneConfigs.FloatFromRight;
+          }}
+          renderScene={(route, navigator) => {
+            
+            /*
+            * navigator的使用方法
+            * http://stackoverflow.com/questions/29335523/react-native-custom-navigation-with-navigator-component
+            * 但是又有点不同，必须这样，否则后面navigator传不了props
+            * https://github.com/facebook/react-native/issues/1103
+            *  
+            */
+            if (route.component) {
+              var Component = route.component;
+              return (<View style={{flex: 1}}>
+                        <Component navigator={navigator} route={route} {...route.passProps}/>
+                      </View>);
+            }
           }}
-          configureScene={() => Navigator.SceneConfigs.FloatFromRight}
-          renderScene={this._renderScreen}
         />);
 
     } else {
diff --git a/ios/RNZhihuDaily.xcodeproj/project.pbxproj b/ios/RNZhihuDaily.xcodeproj/project.pbxproj
index dad54bb..809bf71 100644
--- a/ios/RNZhihuDaily.xcodeproj/project.pbxproj
+++ b/ios/RNZhihuDaily.xcodeproj/project.pbxproj
@@ -21,6 +21,7 @@
 		13B07FBF1A68108700A75B9A /* Images.xcassets in Resources */ = {isa = PBXBuildFile; fileRef = 13B07FB51A68108700A75B9A /* Images.xcassets */; };
 		13B07FC11A68108700A75B9A /* main.m in Sources */ = {isa = PBXBuildFile; fileRef = 13B07FB71A68108700A75B9A /* main.m */; };
 		146834051AC3E58100842450 /* libReact.a in Frameworks */ = {isa = PBXBuildFile; fileRef = 146834041AC3E56700842450 /* libReact.a */; };
+		41AD941E1C1B3C9D0079B0C3 /* libAIBHTMLWebView.a in Frameworks */ = {isa = PBXBuildFile; fileRef = 41AD94111C1B3C7C0079B0C3 /* libAIBHTMLWebView.a */; };
 		832341BD1AAA6AB300B99B32 /* libRCTText.a in Frameworks */ = {isa = PBXBuildFile; fileRef = 832341B51AAA6A8300B99B32 /* libRCTText.a */; };
 /* End PBXBuildFile section */
 
@@ -88,6 +89,20 @@
 			remoteGlobalIDString = 83CBBA2E1A601D0E00E9B192;
 			remoteInfo = React;
 		};
+		41AD94101C1B3C7C0079B0C3 /* PBXContainerItemProxy */ = {
+			isa = PBXContainerItemProxy;
+			containerPortal = 41AD940B1C1B3C7B0079B0C3 /* AIBHTMLWebView.xcodeproj */;
+			proxyType = 2;
+			remoteGlobalIDString = E236CCD31AD173A500D5FC85;
+			remoteInfo = AIBHTMLWebView;
+		};
+		41AD94121C1B3C7C0079B0C3 /* PBXContainerItemProxy */ = {
+			isa = PBXContainerItemProxy;
+			containerPortal = 41AD940B1C1B3C7B0079B0C3 /* AIBHTMLWebView.xcodeproj */;
+			proxyType = 2;
+			remoteGlobalIDString = E236CCDE1AD173A500D5FC85;
+			remoteInfo = AIBHTMLWebViewTests;
+		};
 		78C398B81ACF4ADC00677621 /* PBXContainerItemProxy */ = {
 			isa = PBXContainerItemProxy;
 			containerPortal = 78C398B01ACF4ADC00677621 /* RCTLinking.xcodeproj */;
@@ -105,17 +120,17 @@
 /* End PBXContainerItemProxy section */
 
 /* Begin PBXFileReference section */
-		008F07F21AC5B25A0029DE68 /* main.jsbundle */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = text; name = main.jsbundle; path = main.jsbundle; sourceTree = "<group>"; };
-		00C302A71ABCB8CE00DB3ED1 /* RCTActionSheet.xcodeproj */ = {isa = PBXFileReference; lastKnownFileType = "wrapper.pb-project"; name = RCTActionSheet.xcodeproj; path = ../node_modules/react-native/Libraries/ActionSheetIOS/RCTActionSheet.xcodeproj; sourceTree = "<group>"; };
-		00C302B51ABCB90400DB3ED1 /* RCTGeolocation.xcodeproj */ = {isa = PBXFileReference; lastKnownFileType = "wrapper.pb-project"; name = RCTGeolocation.xcodeproj; path = ../node_modules/react-native/Libraries/Geolocation/RCTGeolocation.xcodeproj; sourceTree = "<group>"; };
-		00C302BB1ABCB91800DB3ED1 /* RCTImage.xcodeproj */ = {isa = PBXFileReference; lastKnownFileType = "wrapper.pb-project"; name = RCTImage.xcodeproj; path = ../node_modules/react-native/Libraries/Image/RCTImage.xcodeproj; sourceTree = "<group>"; };
-		00C302D31ABCB9D200DB3ED1 /* RCTNetwork.xcodeproj */ = {isa = PBXFileReference; lastKnownFileType = "wrapper.pb-project"; name = RCTNetwork.xcodeproj; path = ../node_modules/react-native/Libraries/Network/RCTNetwork.xcodeproj; sourceTree = "<group>"; };
-		00C302DF1ABCB9EE00DB3ED1 /* RCTVibration.xcodeproj */ = {isa = PBXFileReference; lastKnownFileType = "wrapper.pb-project"; name = RCTVibration.xcodeproj; path = ../node_modules/react-native/Libraries/Vibration/RCTVibration.xcodeproj; sourceTree = "<group>"; };
+		008F07F21AC5B25A0029DE68 /* main.jsbundle */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = text; path = main.jsbundle; sourceTree = "<group>"; };
+		00C302A71ABCB8CE00DB3ED1 /* RCTActionSheet.xcodeproj */ = {isa = PBXFileReference; lastKnownFileType = "wrapper.pb-project"; name = RCTActionSheet.xcodeproj; path = "../node_modules/react-native/Libraries/ActionSheetIOS/RCTActionSheet.xcodeproj"; sourceTree = "<group>"; };
+		00C302B51ABCB90400DB3ED1 /* RCTGeolocation.xcodeproj */ = {isa = PBXFileReference; lastKnownFileType = "wrapper.pb-project"; name = RCTGeolocation.xcodeproj; path = "../node_modules/react-native/Libraries/Geolocation/RCTGeolocation.xcodeproj"; sourceTree = "<group>"; };
+		00C302BB1ABCB91800DB3ED1 /* RCTImage.xcodeproj */ = {isa = PBXFileReference; lastKnownFileType = "wrapper.pb-project"; name = RCTImage.xcodeproj; path = "../node_modules/react-native/Libraries/Image/RCTImage.xcodeproj"; sourceTree = "<group>"; };
+		00C302D31ABCB9D200DB3ED1 /* RCTNetwork.xcodeproj */ = {isa = PBXFileReference; lastKnownFileType = "wrapper.pb-project"; name = RCTNetwork.xcodeproj; path = "../node_modules/react-native/Libraries/Network/RCTNetwork.xcodeproj"; sourceTree = "<group>"; };
+		00C302DF1ABCB9EE00DB3ED1 /* RCTVibration.xcodeproj */ = {isa = PBXFileReference; lastKnownFileType = "wrapper.pb-project"; name = RCTVibration.xcodeproj; path = "../node_modules/react-native/Libraries/Vibration/RCTVibration.xcodeproj"; sourceTree = "<group>"; };
 		00E356EE1AD99517003FC87E /* RNZhihuDailyTests.xctest */ = {isa = PBXFileReference; explicitFileType = wrapper.cfbundle; includeInIndex = 0; path = RNZhihuDailyTests.xctest; sourceTree = BUILT_PRODUCTS_DIR; };
 		00E356F11AD99517003FC87E /* Info.plist */ = {isa = PBXFileReference; lastKnownFileType = text.plist.xml; path = Info.plist; sourceTree = "<group>"; };
 		00E356F21AD99517003FC87E /* RNZhihuDailyTests.m */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.c.objc; path = RNZhihuDailyTests.m; sourceTree = "<group>"; };
-		139105B61AF99BAD00B5F7CC /* RCTSettings.xcodeproj */ = {isa = PBXFileReference; lastKnownFileType = "wrapper.pb-project"; name = RCTSettings.xcodeproj; path = ../node_modules/react-native/Libraries/Settings/RCTSettings.xcodeproj; sourceTree = "<group>"; };
-		139FDEE61B06529A00C62182 /* RCTWebSocket.xcodeproj */ = {isa = PBXFileReference; lastKnownFileType = "wrapper.pb-project"; name = RCTWebSocket.xcodeproj; path = ../node_modules/react-native/Libraries/WebSocket/RCTWebSocket.xcodeproj; sourceTree = "<group>"; };
+		139105B61AF99BAD00B5F7CC /* RCTSettings.xcodeproj */ = {isa = PBXFileReference; lastKnownFileType = "wrapper.pb-project"; name = RCTSettings.xcodeproj; path = "../node_modules/react-native/Libraries/Settings/RCTSettings.xcodeproj"; sourceTree = "<group>"; };
+		139FDEE61B06529A00C62182 /* RCTWebSocket.xcodeproj */ = {isa = PBXFileReference; lastKnownFileType = "wrapper.pb-project"; name = RCTWebSocket.xcodeproj; path = "../node_modules/react-native/Libraries/WebSocket/RCTWebSocket.xcodeproj"; sourceTree = "<group>"; };
 		13B07F961A680F5B00A75B9A /* RNZhihuDaily.app */ = {isa = PBXFileReference; explicitFileType = wrapper.application; includeInIndex = 0; path = RNZhihuDaily.app; sourceTree = BUILT_PRODUCTS_DIR; };
 		13B07FAF1A68108700A75B9A /* AppDelegate.h */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.c.h; name = AppDelegate.h; path = RNZhihuDaily/AppDelegate.h; sourceTree = "<group>"; };
 		13B07FB01A68108700A75B9A /* AppDelegate.m */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.c.objc; name = AppDelegate.m; path = RNZhihuDaily/AppDelegate.m; sourceTree = "<group>"; };
@@ -123,9 +138,10 @@
 		13B07FB51A68108700A75B9A /* Images.xcassets */ = {isa = PBXFileReference; lastKnownFileType = folder.assetcatalog; name = Images.xcassets; path = RNZhihuDaily/Images.xcassets; sourceTree = "<group>"; };
 		13B07FB61A68108700A75B9A /* Info.plist */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = text.plist.xml; name = Info.plist; path = RNZhihuDaily/Info.plist; sourceTree = "<group>"; };
 		13B07FB71A68108700A75B9A /* main.m */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.c.objc; name = main.m; path = RNZhihuDaily/main.m; sourceTree = "<group>"; };
-		146833FF1AC3E56700842450 /* React.xcodeproj */ = {isa = PBXFileReference; lastKnownFileType = "wrapper.pb-project"; name = React.xcodeproj; path = ../node_modules/react-native/React/React.xcodeproj; sourceTree = "<group>"; };
-		78C398B01ACF4ADC00677621 /* RCTLinking.xcodeproj */ = {isa = PBXFileReference; lastKnownFileType = "wrapper.pb-project"; name = RCTLinking.xcodeproj; path = ../node_modules/react-native/Libraries/LinkingIOS/RCTLinking.xcodeproj; sourceTree = "<group>"; };
-		832341B01AAA6A8300B99B32 /* RCTText.xcodeproj */ = {isa = PBXFileReference; lastKnownFileType = "wrapper.pb-project"; name = RCTText.xcodeproj; path = ../node_modules/react-native/Libraries/Text/RCTText.xcodeproj; sourceTree = "<group>"; };
+		146833FF1AC3E56700842450 /* React.xcodeproj */ = {isa = PBXFileReference; lastKnownFileType = "wrapper.pb-project"; name = React.xcodeproj; path = "../node_modules/react-native/React/React.xcodeproj"; sourceTree = "<group>"; };
+		41AD940B1C1B3C7B0079B0C3 /* AIBHTMLWebView.xcodeproj */ = {isa = PBXFileReference; lastKnownFileType = "wrapper.pb-project"; name = AIBHTMLWebView.xcodeproj; path = "../node_modules/react-native-html-webview/AIBHTMLWebView.xcodeproj"; sourceTree = "<group>"; };
+		78C398B01ACF4ADC00677621 /* RCTLinking.xcodeproj */ = {isa = PBXFileReference; lastKnownFileType = "wrapper.pb-project"; name = RCTLinking.xcodeproj; path = "../node_modules/react-native/Libraries/LinkingIOS/RCTLinking.xcodeproj"; sourceTree = "<group>"; };
+		832341B01AAA6A8300B99B32 /* RCTText.xcodeproj */ = {isa = PBXFileReference; lastKnownFileType = "wrapper.pb-project"; name = RCTText.xcodeproj; path = "../node_modules/react-native/Libraries/Text/RCTText.xcodeproj"; sourceTree = "<group>"; };
 /* End PBXFileReference section */
 
 /* Begin PBXFrameworksBuildPhase section */
@@ -140,6 +156,7 @@
 			isa = PBXFrameworksBuildPhase;
 			buildActionMask = 2147483647;
 			files = (
+				41AD941E1C1B3C9D0079B0C3 /* libAIBHTMLWebView.a in Frameworks */,
 				146834051AC3E58100842450 /* libReact.a in Frameworks */,
 				00C302E51ABCBA2D00DB3ED1 /* libRCTActionSheet.a in Frameworks */,
 				00C302E71ABCBA2D00DB3ED1 /* libRCTGeolocation.a in Frameworks */,
@@ -251,6 +268,15 @@
 			name = Products;
 			sourceTree = "<group>";
 		};
+		41AD940C1C1B3C7B0079B0C3 /* Products */ = {
+			isa = PBXGroup;
+			children = (
+				41AD94111C1B3C7C0079B0C3 /* libAIBHTMLWebView.a */,
+				41AD94131C1B3C7C0079B0C3 /* AIBHTMLWebViewTests.xctest */,
+			);
+			name = Products;
+			sourceTree = "<group>";
+		};
 		78C398B11ACF4ADC00677621 /* Products */ = {
 			isa = PBXGroup;
 			children = (
@@ -287,6 +313,7 @@
 		83CBB9F61A601CBA00E9B192 = {
 			isa = PBXGroup;
 			children = (
+				41AD940B1C1B3C7B0079B0C3 /* AIBHTMLWebView.xcodeproj */,
 				13B07FAE1A68108700A75B9A /* RNZhihuDaily */,
 				832341AE1AAA6A7D00B99B32 /* Libraries */,
 				00E356EF1AD99517003FC87E /* RNZhihuDailyTests */,
@@ -371,6 +398,10 @@
 			productRefGroup = 83CBBA001A601CBA00E9B192 /* Products */;
 			projectDirPath = "";
 			projectReferences = (
+				{
+					ProductGroup = 41AD940C1C1B3C7B0079B0C3 /* Products */;
+					ProjectRef = 41AD940B1C1B3C7B0079B0C3 /* AIBHTMLWebView.xcodeproj */;
+				},
 				{
 					ProductGroup = 00C302A81ABCB8CE00DB3ED1 /* Products */;
 					ProjectRef = 00C302A71ABCB8CE00DB3ED1 /* RCTActionSheet.xcodeproj */;
@@ -477,6 +508,20 @@
 			remoteRef = 146834031AC3E56700842450 /* PBXContainerItemProxy */;
 			sourceTree = BUILT_PRODUCTS_DIR;
 		};
+		41AD94111C1B3C7C0079B0C3 /* libAIBHTMLWebView.a */ = {
+			isa = PBXReferenceProxy;
+			fileType = archive.ar;
+			path = libAIBHTMLWebView.a;
+			remoteRef = 41AD94101C1B3C7C0079B0C3 /* PBXContainerItemProxy */;
+			sourceTree = BUILT_PRODUCTS_DIR;
+		};
+		41AD94131C1B3C7C0079B0C3 /* AIBHTMLWebViewTests.xctest */ = {
+			isa = PBXReferenceProxy;
+			fileType = wrapper.cfbundle;
+			path = AIBHTMLWebViewTests.xctest;
+			remoteRef = 41AD94121C1B3C7C0079B0C3 /* PBXContainerItemProxy */;
+			sourceTree = BUILT_PRODUCTS_DIR;
+		};
 		78C398B91ACF4ADC00677621 /* libRCTLinking.a */ = {
 			isa = PBXReferenceProxy;
 			fileType = archive.ar;
@@ -526,7 +571,6 @@
 			runOnlyForDeploymentPostprocessing = 0;
 			shellPath = /bin/sh;
 			shellScript = "../node_modules/react-native/packager/react-native-xcode.sh";
-			showEnvVarsInLog = 1;
 		};
 /* End PBXShellScriptBuildPhase section */
 
@@ -618,7 +662,7 @@
 					/Applications/Xcode.app/Contents/Developer/Toolchains/XcodeDefault.xctoolchain/usr/include,
 					"$(SRCROOT)/../node_modules/react-native/React/**",
 				);
-				INFOPLIST_FILE = "RNZhihuDaily/Info.plist";
+				INFOPLIST_FILE = RNZhihuDaily/Info.plist;
 				LD_RUNPATH_SEARCH_PATHS = "$(inherited) @executable_path/Frameworks";
 				OTHER_LDFLAGS = "-ObjC";
 				PRODUCT_NAME = RNZhihuDaily;
@@ -634,7 +678,7 @@
 					/Applications/Xcode.app/Contents/Developer/Toolchains/XcodeDefault.xctoolchain/usr/include,
 					"$(SRCROOT)/../node_modules/react-native/React/**",
 				);
-				INFOPLIST_FILE = "RNZhihuDaily/Info.plist";
+				INFOPLIST_FILE = RNZhihuDaily/Info.plist;
 				LD_RUNPATH_SEARCH_PATHS = "$(inherited) @executable_path/Frameworks";
 				OTHER_LDFLAGS = "-ObjC";
 				PRODUCT_NAME = RNZhihuDaily;
diff --git a/ios/RNZhihuDaily/AppDelegate.m b/ios/RNZhihuDaily/AppDelegate.m
index 9daadb6..1c91897 100644
--- a/ios/RNZhihuDaily/AppDelegate.m
+++ b/ios/RNZhihuDaily/AppDelegate.m
@@ -39,7 +39,7 @@ - (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(
    * generated by "Bundle React Native code and images" build step.
    */
 
-//jsCodeLocation = [[NSBundle mainBundle] URLForResource:@"main" withExtension:@"jsbundle"];
+jsCodeLocation = [[NSBundle mainBundle] URLForResource:@"main" withExtension:@"jsbundle"];
 
   RCTRootView *rootView = [[RCTRootView alloc] initWithBundleURL:jsCodeLocation
                                                       moduleName:@"RNZhihuDaily"
diff --git a/package.json b/package.json
index a3f1d61..52dd6aa 100644
--- a/package.json
+++ b/package.json
@@ -7,6 +7,7 @@
   },
   "dependencies": {
     "react-native": "^0.16.0",
+    "react-native-html-webview": "0.0.17",
     "react-native-navbar": "^1.1.1",
     "react-native-refresher": "^0.1.1"
   }

From 63f881311e378dda47c6af949bc658070b6039dd Mon Sep 17 00:00:00 2001
From: horizon0514 <huangsy@huangsydeMacBook-Air.local>
Date: Sat, 12 Dec 2015 15:34:49 +0800
Subject: [PATCH 4/6] =?UTF-8?q?=E6=B7=BB=E5=8A=A0viewPager?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 MainScreen.js                  | 117 +++++++++++++++++++++------------
 Slider.js                      |  69 +++++++++++++++++++
 ios/RNZhihuDaily/AppDelegate.m |   2 +-
 package.json                   |   3 +-
 4 files changed, 147 insertions(+), 44 deletions(-)
 create mode 100644 Slider.js

diff --git a/MainScreen.js b/MainScreen.js
index f192273..c65e82a 100644
--- a/MainScreen.js
+++ b/MainScreen.js
@@ -6,8 +6,9 @@
 
 var React = require('react-native');
 var DataWarehouse = require('./DataWarehouse');
-var NavigationBar = require('react-native-navbar');
 var StoryView = require('./Story');
+var Slider = require('./Slider');
+
 var {
   StyleSheet,
   ListView,
@@ -33,7 +34,10 @@ class MainScreen extends Component {
       currentDay: 0,
       dataBlob: {},
       sectionId: [],
-      dataSource: new ListView.DataSource({
+      sliderDataSource: null,
+      dataSource: new ListView.DataSource({//DataSource 接受这四个参数，如果数据格式不是默认的，那么需要手动实现getRowData,getSectionHeaderData两个函数
+        // getRowData: this.getRowData,
+        // getSectionHeaderData: this.getSectionHeaderData,
         rowHasChanged: (r1,r2)=>r1 !== r2,
         sectionHeaderHasChanged: (s1,s2)=>s1!==s2
       }),
@@ -54,7 +58,15 @@ class MainScreen extends Component {
     } else {
       url += DataWarehouse.before+date;
     }
-    var tempDataBlob = this.state.dataBlob;
+    /*
+    *  之前的dataBlob,dataBlob数据结构为
+      {
+        '20150101':{},//
+        '201412231': {}
+        ...
+      }
+      这里向dataBlob中添加新数据必须返回新的对象，否则dataSource无法判断是否更新了，也就不会渲染
+    */
     var sectionId = this.state.sectionId;
     var dataBlob = this.state.dataBlob;
     
@@ -62,6 +74,10 @@ class MainScreen extends Component {
       .then(response => response.json())
       .then(response => {
         var date = response.date;
+        //检查是否有topstories
+        if(response.top_stories){
+          this.state.sliderDataSource = response.top_stories;
+        }
         var newDataBlob = {};
         var newSectionId = sectionId.slice();
         newSectionId.push(date);
@@ -71,9 +87,10 @@ class MainScreen extends Component {
 
         this.setState({
           currentDay: date,
+          //sliderDataSource: response.top_stories||null,
           dataBlob: newDataBlob,
           sectionId: newSectionId,
-          dataSource: this.state.dataSource.cloneWithRowsAndSections(this.state.dataBlob,this.state.sectionId,null),
+          dataSource: this.state.dataSource.cloneWithRowsAndSections(newDataBlob,newSectionId,null),
           loaded: true
         });
         
@@ -92,20 +109,19 @@ class MainScreen extends Component {
   }
   
   renderRow(rowData, sectionID, rowID) {
-    console.log(rowData);
     return (
-         <TouchableHighlight  onPress={()=>this.rowPressed(rowData.id)} underlayColor='#dddddd'>
+        <TouchableHighlight  onPress={()=>this.rowPressed(rowData.id)} underlayColor='#dddddd'>
           <View>
-           <View style={styles.rowContainer}>
-             <Image style={styles.thumb} source={{uri: rowData.images[0]}}/>
-             <View style={styles.textContainer}>
-              <Text style={styles.title}>{rowData.title}</Text>
-              <Text style={styles.desc}></Text>
-             </View>
-           </View>
-           <View style={styles.separator}/>
-           </View>
-      </TouchableHighlight>     
+            <View style={styles.rowContainer}>
+              <View style={styles.textContainer}>
+                <Text style={styles.title}>{rowData.title}</Text>
+                <Text style={styles.desc}></Text>
+              </View>
+              <Image style={styles.thumb} source={{uri: rowData.images[0]}}/>
+            </View>
+            <View style={styles.separator}/>
+          </View>
+        </TouchableHighlight>     
 
     );
   }
@@ -139,7 +155,11 @@ class MainScreen extends Component {
   render() {
     
     var spinner = <ActivityIndicatorIOS style={styles.centering} hidden='false' size='large'/>;
-          
+    var slider = this.state.sliderDataSource? 
+                  (<View style={styles.sliderContainer}>
+                    <Slider style={styles.slider} dataSource={this.state.sliderDataSource}/>
+                    </View>)
+                  :(<View></View>);  
     if(!this.state.loaded){
       return(
         <View style={styles.container}>{spinner}</View>
@@ -148,7 +168,8 @@ class MainScreen extends Component {
       return (
           <View style={styles.container}>
               <View style={styles.header}></View>
-              <ListView
+              {slider}
+              <ListView style={styles.listview}
                 dataSource={this.state.dataSource}
                 renderSectionHeader={this.renderSectionHeader.bind(this)}
                 renderFooter={this.renderFooter.bind(this)}
@@ -178,13 +199,13 @@ var styles = StyleSheet.create({
     },
   thumb:{
     width: 80,
-    height: 80,
+    height: 60,
     marginRight: 10
 
   },
   title: {
-    fontSize: 18,
-    color: 'black',
+    fontSize: 16,
+    color: '#000000',
     fontWeight: 'bold'
   },
   textContainer: {
@@ -192,28 +213,40 @@ var styles = StyleSheet.create({
   },
   separator: {
       height: 1,
-      backgroundColor: '#dddddd'
-    },
-    desc:{
-      fontSize:14,
-      color: '#666666'
-    },
-    centering: {
-      position: 'absolute',
-      left: 100,
-      top: 200
-    },
-    section: {
-      height: 30,
-      backgroundColor: '#0766C7',
-      flex: 1,
-    },
-    sectionText: {
-      color: '#ffffff',
-      marginTop: 10,
-      textAlign: 'center',
+      backgroundColor: '#f5f5f5'
+  },
+  desc:{
+    fontSize:14,
+    color: '#666666'
+  },
+  centering: {
+    position: 'absolute',
+    left: 100,
+    top: 200
+  },
+  section: {
+    height: 30,
+    backgroundColor: '#0766C7',
+    flex: 1,
+  },
+  sectionText: {
+    color: '#ffffff',
+    marginTop: 10,
+    textAlign: 'center',
 
-    }
+  },
+  sliderContainer:{
+    height: 700,
+    flex: 1,
+    //flexDirection: 'column',
+
+  },
+  slider:{
+    height: 700,
+  },
+  listview:{
+    marginTop: -150,
+  }
 });
 
 module.exports = MainScreen;
\ No newline at end of file
diff --git a/Slider.js b/Slider.js
new file mode 100644
index 0000000..8063a96
--- /dev/null
+++ b/Slider.js
@@ -0,0 +1,69 @@
+/*
+*	封装ViewPager
+*/
+'use strict';
+
+var React = require('react-native');
+var ViewPager = require('react-native-viewpager');
+
+
+
+var {
+	View,
+	Text,
+	StyleSheet,
+	Dimensions,
+	Component,
+	Image,
+} = React;
+
+var deviceWidth = Dimensions.get('window').width;
+
+
+class Slider extends Component{
+	constructor(props){
+		super(props);
+		this.state={
+			dataSource: new ViewPager.DataSource({
+      			pageHasChanged: (p1, p2) => p1 !== p2})
+		};
+	}
+	componentDidMount(){
+		this.setState({
+			dataSource: this.state.dataSource.cloneWithPages(this.props.dataSource)
+		});
+	}
+	
+	_renderPage(data,pageId){
+		console.log(data);
+		return (
+      		<Image
+        		source={{uri: data.image}}
+        		style={styles.page} />
+    		);
+	}
+
+	render(){
+		console.log('render slider');
+		console.log(this.props);
+		return (
+			<ViewPager
+		        style={{flex:1,height: 200}}
+		        dataSource={this.state.dataSource}
+		        renderPage={this._renderPage}
+		        isLoop={true}
+		        autoPlay={true}/>
+		);
+	}
+}
+
+var styles = StyleSheet.create({
+	page: {
+		height: 200,
+		width: deviceWidth,
+
+	},
+	
+});
+
+module.exports = Slider;
\ No newline at end of file
diff --git a/ios/RNZhihuDaily/AppDelegate.m b/ios/RNZhihuDaily/AppDelegate.m
index 1c91897..082292e 100644
--- a/ios/RNZhihuDaily/AppDelegate.m
+++ b/ios/RNZhihuDaily/AppDelegate.m
@@ -39,7 +39,7 @@ - (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(
    * generated by "Bundle React Native code and images" build step.
    */
 
-jsCodeLocation = [[NSBundle mainBundle] URLForResource:@"main" withExtension:@"jsbundle"];
+  //jsCodeLocation = [[NSBundle mainBundle] URLForResource:@"main" withExtension:@"jsbundle"];
 
   RCTRootView *rootView = [[RCTRootView alloc] initWithBundleURL:jsCodeLocation
                                                       moduleName:@"RNZhihuDaily"
diff --git a/package.json b/package.json
index 52dd6aa..e697486 100644
--- a/package.json
+++ b/package.json
@@ -9,6 +9,7 @@
     "react-native": "^0.16.0",
     "react-native-html-webview": "0.0.17",
     "react-native-navbar": "^1.1.1",
-    "react-native-refresher": "^0.1.1"
+    "react-native-refresher": "^0.1.1",
+    "react-native-viewpager": "^0.1.4"
   }
 }

From 02276bfbebbc4dbeba0fd4288e8abbdb5fa9ce95 Mon Sep 17 00:00:00 2001
From: horizon0514 <huangsy@huangsydeMacBook-Air.local>
Date: Sun, 13 Dec 2015 16:21:17 +0800
Subject: [PATCH 5/6] fix viewPager

---
 MainScreen.js                                 | 18 +++------
 Slider.js                                     | 38 ++++++++++++++++---
 .../xcschemes/RNZhihuDaily.xcscheme           | 11 ++++--
 3 files changed, 45 insertions(+), 22 deletions(-)

diff --git a/MainScreen.js b/MainScreen.js
index c65e82a..bd63f8d 100644
--- a/MainScreen.js
+++ b/MainScreen.js
@@ -157,7 +157,7 @@ class MainScreen extends Component {
     var spinner = <ActivityIndicatorIOS style={styles.centering} hidden='false' size='large'/>;
     var slider = this.state.sliderDataSource? 
                   (<View style={styles.sliderContainer}>
-                    <Slider style={styles.slider} dataSource={this.state.sliderDataSource}/>
+                    <Slider dataSource={this.state.sliderDataSource}/>
                     </View>)
                   :(<View></View>);  
     if(!this.state.loaded){
@@ -169,7 +169,7 @@ class MainScreen extends Component {
           <View style={styles.container}>
               <View style={styles.header}></View>
               {slider}
-              <ListView style={styles.listview}
+              <ListView
                 dataSource={this.state.dataSource}
                 renderSectionHeader={this.renderSectionHeader.bind(this)}
                 renderFooter={this.renderFooter.bind(this)}
@@ -236,17 +236,11 @@ var styles = StyleSheet.create({
 
   },
   sliderContainer:{
-    height: 700,
-    flex: 1,
-    //flexDirection: 'column',
-
-  },
-  slider:{
-    height: 700,
+    height: 200,
+    
   },
-  listview:{
-    marginTop: -150,
-  }
+  
+  
 });
 
 module.exports = MainScreen;
\ No newline at end of file
diff --git a/Slider.js b/Slider.js
index 8063a96..708d833 100644
--- a/Slider.js
+++ b/Slider.js
@@ -37,18 +37,23 @@ class Slider extends Component{
 	_renderPage(data,pageId){
 		console.log(data);
 		return (
-      		<Image
-        		source={{uri: data.image}}
-        		style={styles.page} />
+			<View style={styles.container}>
+	      		<Image
+	        		source={{uri: data.image}}
+	        		style={styles.page}>
+	        	<View style={styles.titleContainer}>	
+	        		<Text style={styles.title}>{data.title}</Text>	
+	        	</View>
+	        	
+	        	</Image>
+	        </View>		
     		);
 	}
 
 	render(){
-		console.log('render slider');
-		console.log(this.props);
 		return (
 			<ViewPager
-		        style={{flex:1,height: 200}}
+		        style={this.props.style}
 		        dataSource={this.state.dataSource}
 		        renderPage={this._renderPage}
 		        isLoop={true}
@@ -58,11 +63,32 @@ class Slider extends Component{
 }
 
 var styles = StyleSheet.create({
+	container: {
+		
+	},
 	page: {
 		height: 200,
 		width: deviceWidth,
+		
 
 	},
+	titleContainer: {
+		flex: 1,
+		padding: 20,
+		
+		
+	},
+  
+	title: {
+	    color: '#ffffff',
+	    fontSize: 20,
+	    fontWeight : 'bold',
+	    position: 'absolute',
+	    bottom: 20,
+	    
+	    //backgroundColor: 'transparent',
+	  }
+  
 	
 });
 
diff --git a/ios/RNZhihuDaily.xcodeproj/xcshareddata/xcschemes/RNZhihuDaily.xcscheme b/ios/RNZhihuDaily.xcodeproj/xcshareddata/xcschemes/RNZhihuDaily.xcscheme
index 5e32375..2802215 100644
--- a/ios/RNZhihuDaily.xcodeproj/xcshareddata/xcschemes/RNZhihuDaily.xcscheme
+++ b/ios/RNZhihuDaily.xcodeproj/xcshareddata/xcschemes/RNZhihuDaily.xcscheme
@@ -37,10 +37,10 @@
       </BuildActionEntries>
    </BuildAction>
    <TestAction
+      buildConfiguration = "Debug"
       selectedDebuggerIdentifier = "Xcode.DebuggerFoundation.Debugger.LLDB"
       selectedLauncherIdentifier = "Xcode.DebuggerFoundation.Launcher.LLDB"
-      shouldUseLaunchSchemeArgsEnv = "YES"
-      buildConfiguration = "Debug">
+      shouldUseLaunchSchemeArgsEnv = "YES">
       <Testables>
          <TestableReference
             skipped = "NO">
@@ -62,15 +62,18 @@
             ReferencedContainer = "container:RNZhihuDaily.xcodeproj">
          </BuildableReference>
       </MacroExpansion>
+      <AdditionalOptions>
+      </AdditionalOptions>
    </TestAction>
    <LaunchAction
+      buildConfiguration = "Debug"
       selectedDebuggerIdentifier = "Xcode.DebuggerFoundation.Debugger.LLDB"
       selectedLauncherIdentifier = "Xcode.DebuggerFoundation.Launcher.LLDB"
       launchStyle = "0"
       useCustomWorkingDirectory = "NO"
-      buildConfiguration = "Debug"
       ignoresPersistentStateOnLaunch = "NO"
       debugDocumentVersioning = "YES"
+      debugServiceExtension = "internal"
       allowLocationSimulation = "YES">
       <BuildableProductRunnable
          runnableDebuggingMode = "0">
@@ -86,10 +89,10 @@
       </AdditionalOptions>
    </LaunchAction>
    <ProfileAction
+      buildConfiguration = "Release"
       shouldUseLaunchSchemeArgsEnv = "YES"
       savedToolIdentifier = ""
       useCustomWorkingDirectory = "NO"
-      buildConfiguration = "Release"
       debugDocumentVersioning = "YES">
       <BuildableProductRunnable
          runnableDebuggingMode = "0">

From 57b880b5d7fb49bb457e1d03c60714fde5f65151 Mon Sep 17 00:00:00 2001
From: horizon0514 <huangsy@huangsydeMacBook-Air.local>
Date: Sun, 13 Dec 2015 18:27:39 +0800
Subject: [PATCH 6/6] fix header

---
 MainScreen.js | 70 +++++++++++++++++++++++++++++++++++++++++++--------
 Slider.js     |  1 -
 2 files changed, 59 insertions(+), 12 deletions(-)

diff --git a/MainScreen.js b/MainScreen.js
index bd63f8d..1cea919 100644
--- a/MainScreen.js
+++ b/MainScreen.js
@@ -20,9 +20,11 @@ var {
   TabBarIOS,
   ActivityIndicatorIOS,
   StatusBarIOS,
+  Dimensions,
 } = React;
 
 
+var deviceWidth = Dimensions.get('window').width;
 
 
 class MainScreen extends Component {
@@ -127,17 +129,39 @@ class MainScreen extends Component {
   }
   renderSectionHeader(sectionData,sectionID){
     //sectionID ＝ 20140101
-    var  dateStr = [sectionID.slice(0,4),'-',sectionID.slice(4,6),'-',sectionID.slice(6)].join('');
+    var dateStr = [sectionID.slice(0,4),'-',sectionID.slice(4,6),'-',sectionID.slice(6)].join('');
     var dateObj = new Date(dateStr);
     var month = dateObj.getUTCMonth() + 1;
     var day = dateObj.getUTCDate();
     var days = ['星期天','星期一','星期二','星期三','星期四','星期五','星期六'];
+
+    //今日热闻
+    var sectionStyle,
+        text;
+    if(dateObj.toDateString()=== new Date().toDateString()){
+      sectionStyle = styles.currentSection;
+      text = '今日要闻';
+    } else {
+      sectionStyle = styles.section;
+      text = month+'月'+day+'日 '+ days[dateObj.getDay()];
+    }
     return (
-      <View style={styles.section}>
-        <Text style={styles.sectionText}>{month+'月'+day+'日 '+ days[dateObj.getDay()]}</Text>
+      <View style={[sectionStyle]}>
+        <Text style={styles.sectionText}>{text}</Text>
       </View>  
     );
   }
+  _renderHeader(){
+    //listview添加header
+    var slider = this.state.sliderDataSource? 
+                  (<View style={styles.sliderContainer}>
+                    <Slider dataSource={this.state.sliderDataSource}/>
+                    </View>)
+                  :(<View></View>); 
+  
+    return slider;
+   
+  }
   renderFooter(){
     return (
       <View>
@@ -151,15 +175,26 @@ class MainScreen extends Component {
     //console.log(this.state.currentDay);
     this._fetchData(this.state.currentDay);
 
+  }
+  _onScroll(e){
+    console.log(e.nativeEvent.contentOffset);
+    var {x,y} = e.nativeEvent.contentOffset;
+    // var headerStyle = styles.currentSection;
+    // console.log(headerStyle);
+    return{
+        opacity: 1-y/200
+      };
+
+    
   }
   render() {
     
     var spinner = <ActivityIndicatorIOS style={styles.centering} hidden='false' size='large'/>;
-    var slider = this.state.sliderDataSource? 
-                  (<View style={styles.sliderContainer}>
-                    <Slider dataSource={this.state.sliderDataSource}/>
-                    </View>)
-                  :(<View></View>);  
+    // var slider = this.state.sliderDataSource? 
+    //               (<View style={styles.sliderContainer}>
+    //                 <Slider dataSource={this.state.sliderDataSource}/>
+    //                 </View>)
+    //               :(<View></View>);  
     if(!this.state.loaded){
       return(
         <View style={styles.container}>{spinner}</View>
@@ -168,13 +203,15 @@ class MainScreen extends Component {
       return (
           <View style={styles.container}>
               <View style={styles.header}></View>
-              {slider}
               <ListView
                 dataSource={this.state.dataSource}
+                renderHeader={this._renderHeader.bind(this)}
                 renderSectionHeader={this.renderSectionHeader.bind(this)}
                 renderFooter={this.renderFooter.bind(this)}
                 onEndReached={this.onEndReached.bind(this)}
-                renderRow={this.renderRow.bind(this)}/>
+                renderRow={this.renderRow.bind(this)}
+                showsVerticalScrollIndicator={false}
+                onScroll={this._onScroll.bind(this)}/>
           </View>
         
       );
@@ -190,7 +227,7 @@ var styles = StyleSheet.create({
   },
   header: {
     height: 20,
-    backgroundColor: '0766C7',
+    backgroundColor: '#0766C7',
 
   },
   rowContainer: {
@@ -229,9 +266,20 @@ var styles = StyleSheet.create({
     backgroundColor: '#0766C7',
     flex: 1,
   },
+  currentSection: {
+    height: 30,
+    backgroundColor: '#0766C7',
+    width: deviceWidth,
+    //marginTop: -200,
+    position: 'absolute',
+    top: 0,
+    opacity: 0,
+    
+  },
   sectionText: {
     color: '#ffffff',
     marginTop: 10,
+    flex: 1,
     textAlign: 'center',
 
   },
diff --git a/Slider.js b/Slider.js
index 708d833..828c712 100644
--- a/Slider.js
+++ b/Slider.js
@@ -35,7 +35,6 @@ class Slider extends Component{
 	}
 	
 	_renderPage(data,pageId){
-		console.log(data);
 		return (
 			<View style={styles.container}>
 	      		<Image