添加viewPager

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,14 +58,26 @@ 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;
 
     fetch(url)
       .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,42 +199,54 @@ 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: {
     flex: 1
   },
   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;

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;

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"

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"
   }
 }