Add ViewPager

MainScreen.js

@@ -12,6 +12,7 @@ import React, {
 } from 'react-native';
 
 import Header from './Header';
+import HomePage from './home/HomePage';
 import TabNavigator from 'react-native-tab-navigator';
 
 const HOME = 'home';
@@ -49,7 +50,7 @@ export default class MainScreen extends Component {
         );
     }
 
-    _createChildView(tag) {
+    static _createChildView(tag) {
         return (
             <View style={{flex:1,backgroundColor:'#00baff',alignItems:'center',justifyContent:'center'}}>
                 <Text style={{fontSize:22}}>{tag}</Text>
@@ -62,11 +63,11 @@ export default class MainScreen extends Component {
             <View style={{flex: 1}}>
                 <Header />
                 <TabNavigator hidesTabTouch={true} tabBarStyle={styles.tab}>
-                    {this._renderTabItem(HOME_NORMAL, HOME_FOCUS, HOME, this._createChildView(HOME))}
-                    {this._renderTabItem(CATEGORY_NORMAL, CATEGORY_FOCUS, CATEGORY, this._createChildView(CATEGORY))}
-                    {this._renderTabItem(FAXIAN_NORMAL, FAXIAN_FOCUS, FAXIAN, this._createChildView(FAXIAN))}
-                    {this._renderTabItem(CART_NORMAL, CART_FOCUS, CART, this._createChildView(CART))}
-                    {this._renderTabItem(PERSONAL_NORMAL, PERSONAL_FOCUS, PERSONAL, this._createChildView(PERSONAL))}
+                    {this._renderTabItem(HOME_NORMAL, HOME_FOCUS, HOME, <HomePage/>)}
+                    {this._renderTabItem(CATEGORY_NORMAL, CATEGORY_FOCUS, CATEGORY, MainScreen._createChildView(CATEGORY))}
+                    {this._renderTabItem(FAXIAN_NORMAL, FAXIAN_FOCUS, FAXIAN, MainScreen._createChildView(FAXIAN))}
+                    {this._renderTabItem(CART_NORMAL, CART_FOCUS, CART, MainScreen._createChildView(CART))}
+                    {this._renderTabItem(PERSONAL_NORMAL, PERSONAL_FOCUS, PERSONAL, MainScreen._createChildView(PERSONAL))}
                 </TabNavigator>
             </View >
         );
@@ -84,6 +85,5 @@ const styles = StyleSheet.create({
         height: 35,
         resizeMode: 'stretch',
         marginTop: 12.5
-    },
-
+    }
 });

home/HomePage.js

@@ -0,0 +1,66 @@
+/**
+ * Created by yuanguozheng on 16/1/22.
+ */
+'use strict';
+import React, {
+    Component,
+    View,
+    Text,
+    Image,
+    StyleSheet,
+    ScrollView,
+    RefreshControl
+} from 'react-native';
+import MenuButton from './MenuButton';
+import ViewPager from 'react-native-viewpager';
+
+const BANNER_IMGS = [
+    require('../images/banner/1.jpg'),
+    require('../images/banner/2.jpg'),
+    require('../images/banner/3.jpg'),
+    require('../images/banner/4.jpg')
+];
+
+export default class HomePage extends Component {
+
+    constructor(props) {
+        super(props);
+        // 用于构建DataSource对象
+        var dataSource = new ViewPager.DataSource({
+            pageHasChanged: (p1, p2) => p1 !== p2,
+        });
+        // 实际的DataSources存放在state中
+        this.state = {
+            dataSource: dataSource.cloneWithPages(BANNER_IMGS)
+        }
+    }
+
+    _renderPage(data, pageID) {
+        return (
+            <Image
+                source={data}
+                style={styles.page}/>
+        );
+    }
+
+    render() {
+        return (
+            <View>
+                <ViewPager
+                    style={{height:130}}
+                    dataSource={this.state.dataSource}
+                    renderPage={this._renderPage}
+                    isLoop={true}
+                    autoPlay={true}/>
+            </View>
+        )
+    }
+}
+
+const styles = StyleSheet.create({
+    page: {
+        flex: 1,
+        height: 130,
+        resizeMode: 'stretch'
+    },
+});

package.json

@@ -8,6 +8,7 @@
   "dependencies": {
     "i": "^0.3.4",
     "react-native": "^0.18.0",
-    "react-native-tab-navigator": "^0.2.15"
+    "react-native-tab-navigator": "^0.2.15",
+    "react-native-viewpager": "^0.2.1"
   }
 }