组件提取

pages/components/MainPage.js

@@ -8,7 +8,6 @@
 
 import React, { Component } from "react";
 import {
-  Platform,
   StyleSheet,
   Text,
   View,
@@ -20,16 +19,10 @@ import {
   ViewPagerAndroid,
   DeviceEventEmitter
 } from "react-native";
-import Swiper from "react-native-swiper";
 import AndroidUtil from "../../util/AndroidUtil";
 import BasePage from "../BasePage";
+import Swipers from './Swiper';
 
-const instructions = Platform.select({
-  ios: "Press Cmd+R to reload,\n" + "Cmd+D or shake for dev menu",
-  android:
-    "Double tap R on your keyboard to reload,\n" +
-    "Shake or press menu button for dev menu"
-});
 
 type Props = {};
 export default class MainPage extends BasePage {
@@ -568,67 +561,7 @@ export default class MainPage extends BasePage {
         break;
       case 1:
         return (
-          <View
-            style={{
-              marginTop: 10,
-              flex: 1,
-              justifyContent: "center",
-              alignItems: "center",
-              flexDirection: "row"
-            }}
-          >
-            <View
-              style={{
-                width: "90%",
-                overflow: "hidden",
-                height: 150
-              }}
-            >
-              <Swiper
-                style={{ flex: 1 }}
-                horizontal={true}
-                autoplayTimeout={3}
-                autoplay={true}
-                activeDotColor="#fff"
-              >
-                <View key="1" style={{ flex: 1 }}>
-                  <Image
-                    source={{
-                      uri:
-                        "https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=1295208965,3056573814&fm=26&gp=0.jpg"
-                    }}
-                    style={{
-                      width: "100%",
-                      height: "100%",
-                      justifyContent: "center",
-                      alignItems: "center",
-                      borderRadius: 10
-                    }}
-                  />
-                </View>
-                <View key="2" style={{ flex: 1 }}>
-                  <TouchableOpacity
-                    activeOpacity={1}
-                    onPress={() => this.toNextPage("MainActivity")}
-                  >
-                    <Image
-                      source={{
-                        uri:
-                          "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1556277324856&di=dc1548a0c5ba10481af922e174912937&imgtype=0&src=http%3A%2F%2Fwww.51pptmoban.com%2Fd%2Ffile%2F2012%2F05%2F12%2F82c4568a90055adcf8fbb896f0841c69.jpg"
-                      }}
-                      style={{
-                        width: "100%",
-                        height: "100%",
-                        justifyContent: "center",
-                        alignItems: "center",
-                        borderRadius: 10
-                      }}
-                    />
-                  </TouchableOpacity>
-                </View>
-              </Swiper>
-            </View>
-          </View>
+          <Swipers/>
         );
         break;
       case 2:

pages/components/Swiper.js

@@ -0,0 +1,68 @@
+import React, { Component } from "react";
+import {
+  StyleSheet,
+  View,
+  Image
+} from "react-native";
+
+import Swiper from "react-native-swiper";
+
+export default class Swipers extends Component {
+  render() {
+    return (
+       <View style={styles.content}>
+        <View style={styles.Carousel}>
+          <Swiper style={styles.wrapper} autoplay autoplayTimeout={2}
+          paginationStyle={{bottom: 3}}>
+            <View style={styles.slide}>
+              <Image
+                source={{
+                  uri:
+                    "https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=1295208965,3056573814&fm=26&gp=0.jpg"
+                }}
+                style={styles.img}
+              />
+            </View>
+            <View style={styles.slide}>
+              <Image
+              source={{
+                  uri:
+                    "https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=1295208965,3056573814&fm=26&gp=0.jpg"
+                }}
+              style={styles.img}
+              />
+            </View>
+          </Swiper>
+        </View>
+       </View>
+    );
+  }
+}
+
+const styles = StyleSheet.create({
+  content: {
+    width: '100%',
+    backgroundColor: "#fff",
+    marginTop: 5,
+    padding: 10
+  },
+  Carousel: {
+    width: '100%',
+    height: 153,
+    borderRadius: 10,
+    overflow: 'hidden'
+  },
+  wrapper: {
+    width: '100%'
+  },
+  slide: {
+    width: '100%',
+    height: 153,
+    justifyContent: 'center',
+    alignItems: 'center'
+  },
+  img: {
+    width: "100%",
+    height: "100%"
+  }
+});