'搜索框,swiper优化'

README.md

@@ -15,4 +15,8 @@
         |——images              --图片文件夹
         |——services            --网络请求文件夹
         |——utils               --通用工具类
-     .....
+     .....
+
+
+## 已发现问题
+1. 首页搜索框，安卓手机每次输入内容后，键盘会消失，（受 `this.setData` 影响 ）

pages/components/MainPage.js

@@ -16,6 +16,7 @@ import {
   FlatList,
   TouchableOpacity,
   ImageBackground,
+  TextInput,
   Button,
   ViewPagerAndroid,
   DeviceEventEmitter
@@ -24,24 +25,30 @@ import Swiper from "react-native-swiper";
 import AndroidUtil from "../../util/AndroidUtil";
 import BasePage from "../BasePage";
 import Header from "./Header";
-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"
-});
+import Swipers from "./Swiper";
+import Dimensions from '../utils/dimensions'
+
 
-type Props = {};
 export default class MainPage extends BasePage {
+  constructor(props) {
+    super(props);
+    this.state = {
+      grade: '大学',
+      text: '小伙子'
+    }
+  }
+
   render() {
     return (
       <View style={{ flex: 1 }}>
+
         <FlatList
           style={{ flex: 1 }}
           ref="_flatlist"
           horizontal={false}
           removeClippedSubviews={false}
           ListHeaderComponent={() => this.headerorfooterComponent()}
+          // searchSection={() => this.renderSearchSection()}
           keyExtractor={(item, index) => item.key.toString()}
           renderItem={({ item }) => {
             return this.loadFlatItem(item);
@@ -239,145 +246,135 @@ export default class MainPage extends BasePage {
     );
   }
 
+  // flat 头部组件
   headerorfooterComponent() {
     return (
-      <Header
-        uri="https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=1295208965,3056573814&amp;fm=26&amp;gp=0.jpg"
-        width={400}
-        height={150}
-        username="卡通笨笨熊"
-        flowerNumber="123234"
-        onPress={() => this.toNextPage("MainActivity")}
-      />
+      <View>
+        <Header
+          uri="https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=1295208965,3056573814&amp;fm=26&amp;gp=0.jpg"
+          width={400}
+          height={150}
+          username="卡通笨笨熊"
+          flowerNumber="123234"
+          onPress={() => this.toNextPage("MainActivity")}
+        />
+        {/* 搜索区域 */}
+        <View style={styles.searchSection}>
+          <TextInput
+            style={styles.searchBox}
+            onChangeText={(text) => this.setState({ text })}
+            value={this.state.text}
+          />
+          <View
+            style={styles.rightBtn}
+          > 
+            <Image 
+              source={{uri: 'https://facebook.github.io/react-native/docs/assets/favicon.png'}}
+              style={styles.rightBtnIcon}
+            />
+            <Text
+              style={styles.rightBtnText}
+            >
+              {this.state.grade}
+            </Text>
+          </View>
+        </View>
+      </View>
+
     );
   }
 
+
   loadFlatItem(data) {
     switch (data.typea) {
-      case 0:
-        return (
-          <View
-            style={{
-              height: 50,
-              width: "100%",
-              justifyContent: "center",
-              alignItems: "center",
-              backgroundColor: "#F8F8F8"
-            }}
-          >
-            <View
-              style={{
-                height: "60%",
-                justifyContent: "center",
-                alignItems: "center",
-                width: "90%",
-                backgroundColor: "#ffffffff",
-                borderRadius: 20,
-                flexDirection: "row"
-              }}
-            >
-              <View style={{ flex: 0.2 }} />
-              <Text
-                numberOfLines={1}
-                style={{
-                  flex: 12,
-                  justifyContent: "center",
-                  alignItems: "center",
-                  fontSize: 18,
-                  fontWeight: "bold",
-                  color: "#3E455B"
-                }}
-              >
-                {data.title}
-              </Text>
+      // case 0:
+      //   return (
+      //     <View
+      //       style={{
+      //         height: 50,
+      //         width: "100%",
+      //         justifyContent: "center",
+      //         alignItems: "center",
+      //         backgroundColor: "red"
+      //       }}
+      //     >
+      //       <View
+      //         style={{
+      //           height: "60%",
+      //           justifyContent: "center",
+      //           alignItems: "center",
+      //           width: "90%",
+      //           backgroundColor: "green",
+      //           borderRadius: 20,
+      //           flexDirection: "row"
+      //         }}
+      //       >
+      //         <View style={{ flex: 0.2 }} />
+      //         <Text
+      //           numberOfLines={1}
+      //           style={{
+      //             flex: 12,
+      //             justifyContent: "center",
+      //             alignItems: "center",
+      //             fontSize: 18,
+      //             fontWeight: "bold",
+      //             color: "#3E455B"
+      //           }}
+      //         >
+      //           {data.title}
+      //         </Text>
 
-              <View
-                style={{
-                  flex: 1,
-                  height: "100%",
-                  justifyContent: "center",
-                  alignItems: "center"
-                }}
-              >
-                <Image
-                  source={{
-                    uri:
-                      "https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=1295208965,3056573814&fm=26&gp=0.jpg"
-                  }}
-                  style={{
-                    width: "50%",
-                    height: "50%",
-                    justifyContent: "center",
-                    alignItems: "center",
-                    borderRadius: 30
-                  }}
-                />
-              </View>
-            </View>
-          </View>
-        );
-        break;
+      //         <View
+      //           style={{
+      //             flex: 1,
+      //             height: "100%",
+      //             justifyContent: "center",
+      //             alignItems: "center"
+      //           }}
+      //         >
+      //           <Image
+      //             source={{
+      //               uri:
+      //                 "https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=1295208965,3056573814&fm=26&gp=0.jpg"
+      //             }}
+      //             style={{
+      //               width: "50%",
+      //               height: "50%",
+      //               justifyContent: "center",
+      //               alignItems: "center",
+      //               borderRadius: 30
+      //             }}
+      //           />
+      //         </View>
+      //       </View>
+      //     </View>
+      //   );
+      //   break;
       case 1:
         return (
           <View
             style={{
-              marginTop: 10,
+              height:193,
               flex: 1,
               justifyContent: "center",
               alignItems: "center",
-              flexDirection: "row"
+              flexDirection: "row",
+              backgroundColor: 'red'
             }}
           >
             <View
               style={{
-                width: "90%",
-                overflow: "hidden",
+                // width: "90%",
+                width: Dimensions.width,
+                // 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>
+            <Swipers 
+              autoplay={true}
+              loop={true}
+              ifShowMiddle={true}
+            />
             </View>
           </View>
         );
@@ -831,5 +828,42 @@ const styles = StyleSheet.create({
     textAlign: "center",
     marginTop: 30,
     marginBottom: 50
+  },
+  /* 搜索区域 */
+  searchSection: {
+    flex: 1,
+    width: Dimensions.width,
+    height: 60,
+    flexDirection: 'row',
+    alignItems: 'center',
+    backgroundColor: '#f0f1f5',
+    justifyContent: 'space-around'
+  },
+  searchBox: {
+    width: 232,
+    height: 40,
+    backgroundColor: '#fff',
+    borderRadius: 20
+  },
+  rightBtn: {
+    width: 113,
+    height: 40,
+    backgroundColor: '#fff',
+    borderRadius: 20,
+    alignItems: 'center',
+    justifyContent: 'center',
+    justifyContent: 'space-around',
+    flexDirection: 'row',
+    paddingLeft: 20,
+    paddingRight: 10,
+  },
+  rightBtnIcon:{
+    width:14,
+    height:14
+  },
+  rightBtnText: {
+    color: '#151515',
+    fontSize: 18,
   }
+  /* 轮播图区域 */
 });

pages/components/Swiper.js

@@ -1,3 +1,11 @@
+/* 
+ * @param：
+ *    autoPlay: 是否自动播放；
+ *    loop: 是否循环，无缝滚动
+ *    ifShowMiddle: 轮播图是否从中间的索引开始
+ * @todo: 首页轮播图和主题适用
+ */
+
 import React, { Component } from "react";
 import {
   StyleSheet,
@@ -5,50 +13,52 @@ import {
   Image
 } from "react-native";
 
+import Dimensions from '../utils/dimensions';
 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
+      <View style={styles.Carousel}>
+        <Swiper
+          style={{ flex: 1 }}
+          horizontal={true}
+          autoplayTimeout={5}
+          autoplay={this.props.autoplay}
+          loop={this.props.loop}
+          index={this.props.ifShowMiddle ? 1 : 0}
+          activeDotColor="#fff"
+          showsPagination={false}
+        >
+          <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"
-                }}
+                uri:
+                  "https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=1295208965,3056573814&fm=26&gp=0.jpg"
+              }}
               style={styles.img}
-              />
-            </View>
-          </Swiper>
-        </View>
-       </View>
+            />
+          </View>
+        </Swiper>
+      </View>
     );
   }
 }
 
 const styles = StyleSheet.create({
-  content: {
-    width: '100%',
-    backgroundColor: "#fff",
-    marginTop: 5,
-    padding: 10
-  },
   Carousel: {
-    width: '100%',
-    height: 153,
+    // width: '100%',
+    // height: 153,
+    flex:1,
     borderRadius: 10,
     overflow: 'hidden'
   },
@@ -56,13 +66,16 @@ const styles = StyleSheet.create({
     width: '100%'
   },
   slide: {
-    width: '100%',
+    width: 352,
     height: 153,
-    justifyContent: 'center',
-    alignItems: 'center'
+    justifyContent: "center",
+    alignItems: "center",
+    borderRadius: 10,
+    marginHorizontal:6
   },
   img: {
-    width: "100%",
-    height: "100%"
+    width: 352,
+    height: 153,
+    borderRadius: 10
   }
 });