efunbox-mobile-8/pages/components/MainPage.js

/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 *
 * @format
 * @flow
 */

import React, { Component } from "react";
import {
  Platform,
  StyleSheet,
  Text,
  View,
  Image,
  FlatList,
  TouchableOpacity,
  ImageBackground,
  TextInput,
  Button,
  ViewPagerAndroid,
  DeviceEventEmitter
} from "react-native";
import Swiper from "react-native-swiper";
import AndroidUtil from "../../util/AndroidUtil";
import BasePage from "../BasePage";
import Header from "./Header";
import Swipers from "./Swiper";
import Dimensions from '../utils/dimensions'


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);
          }}
          data={[
            {
              //轮播
              key: 111,
              typea: 1,
              text: "第一种类型"
            },
            {
              //标题类型
              key: 333,
              typea: 0,
              title: "全部课程全部课程全部课程全部课程全部课程全部课程"
            },
            {
              //只有一个标题下面两个图片
              key: 222,
              typea: 2,
              item: {
                item_type: 1,
                title: "课程表：第一周",
                icon_item: [
                  {
                    icon:
                      "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",
                    name: "第一张图片文字"
                  },
                  {
                    icon:
                      "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",
                    name: "第二张图片文字"
                  }
                ]
              }
            },
            {
              //一个标题，大长图
              key: 444,
              typea: 3,
              title: "五月主题：五一启程，去看看不同世界",
              text: "每天30分钟，玩学两不误",
              icon_item: [
                {
                  icon:
                    "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",
                  name: "第一张图片文字"
                },
                {
                  icon:
                    "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",
                  name: "第二张图片文字"
                },
                {
                  icon:
                    "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",
                  name: "第三张图片文字"
                },
                {
                  icon:
                    "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",
                  name: "第四张图片文字"
                },
                {
                  icon:
                    "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",
                  name: "第五张图片文字"
                }
              ]
            },
            {
              key: 555,
              typea: 4,
              title: "热门课程",
              text: "text",
              mask: false,
              icon_item: [
                {
                  icon:
                    "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",
                  name: "第一张图片文字"
                },
                {
                  icon:
                    "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",
                  name: "第二张图片文字"
                },
                {
                  icon:
                    "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",
                  name: "第三张图片文字"
                },
                {
                  icon:
                    "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",
                  name: "第四张图片文字"
                },
                {
                  icon:
                    "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",
                  name: "第五张图片文字"
                }
              ]
            },
            {
              //标题类型
              key: 0,
              typea: 0,
              title: "全部课程"
            },
            {
              //一个标题，icon下有文字
              key: 666,
              typea: 4,
              title: "测试text为空的时候",
              text: "",
              mask: false,
              icon_item: [
                {
                  icon:
                    "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",
                  name: "第一张图片文字"
                },
                {
                  icon:
                    "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",
                  name: "第二张图片文字"
                },
                {
                  icon:
                    "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",
                  name: "第三张图片文字"
                },
                {
                  icon:
                    "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",
                  name: "第四张图片文字"
                },
                {
                  icon:
                    "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",
                  name: "第五张图片文字"
                }
              ]
            },
            {
              key: 777,
              typea: 4,
              title: "测试观看记录",
              text: "",
              mask: true,
              icon_item: [
                {
                  last_time: "2小时前",
                  icon:
                    "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",
                  name: "第一张图片文字",
                  curriculum_name: "课件名字"
                },
                {
                  last_time: "3小时前",
                  icon:
                    "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",
                  name: "第二张图片文字",
                  curriculum_name: "课件名字1"
                },
                {
                  last_time: "4小时前",
                  icon:
                    "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",
                  name: "第三张图片文字",
                  curriculum_name: "课件名字2"
                },
                {
                  last_time: "1天前",
                  icon:
                    "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",
                  name: "第四张图片文字",
                  curriculum_name: "课件名字3"
                },
                {
                  last_time: "2天前",
                  icon:
                    "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",
                  name: "第五张图片文字",
                  curriculum_name: "课件名字4"
                }
              ]
            }
          ]}
        />
      </View>
    );
  }

  // flat 头部组件
  headerorfooterComponent() {
    return (
      <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: "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;
      case 1:
        return (
          <View
            style={{
              height:193,
              flex: 1,
              justifyContent: "center",
              alignItems: "center",
              flexDirection: "row",
              backgroundColor: 'red'
            }}
          >
            <View
              style={{
                // width: "90%",
                width: Dimensions.width,
                // overflow: "hidden",
                height: 150
              }}
            >
            <Swipers 
              autoplay={true}
              loop={true}
              ifShowMiddle={true}
            />
            </View>
          </View>
        );
        break;
      case 2:
        let arr = [];
        let index = 0;
        for (let item of data.item.icon_item) {
          arr.push(
            <TouchableOpacity
              style={{ flex: 2 }}
              onPress={() => {
                alert(item.name);
              }}
              key={index}
              activeOpacity={1}
            >
              <Image
                source={{
                  uri: item.icon
                }}
                key={index}
                style={{
                  width: "100%",
                  height: "100%",
                  justifyContent: "center",
                  alignItems: "center",
                  borderRadius: 10
                }}
              />
            </TouchableOpacity>
          );
          if (index < data.item.icon_item.length - 1) {
            arr.push(
              <View
                key={item.name}
                style={{
                  flex: 0.1
                }}
              />
            );
          }
          index++;
        }
        return (
          <View
            style={{
              marginTop: 20,
              flex: 1,
              justifyContent: "center",
              alignItems: "center"
            }}
          >
            <View
              style={{
                flex: 1,
                flexDirection: "column",
                width: "90%",
                height: 150
              }}
            >
              <Text
                style={{
                  flex: 0.5,
                  fontSize: 18,
                  fontWeight: "bold",
                  color: "#3E455B"
                }}
              >
                {data.item.title}
              </Text>
              <View
                style={{
                  flex: 2,
                  flexDirection: "row",
                  justifyContent: "space-between"
                }}
              >
                {arr}
              </View>
            </View>
          </View>
        );
        break;
      case 3:
        return (
          <View
            style={{
              marginTop: 20,
              flex: 1,
              justifyContent: "center",
              alignItems: "center"
            }}
          >
            <View
              style={{
                width: "90%",
                height: 200,
                flexDirection: "column"
              }}
            >
              <View
                style={{
                  flex: 0.5,
                  justifyContent: "center",
                  alignItems: "center",
                  flexDirection: "row"
                }}
              >
                <View
                  style={{
                    flex: 0.1,
                    height: 14,
                    justifyContent: "flex-start",
                    alignItems: "center",
                    backgroundColor: "#01AFFE",
                    borderRadius: 20
                  }}
                />
                <View
                  style={{
                    flex: 0.1
                  }}
                />
                <Text
                  numberOfLines={1}
                  style={{
                    flex: 11,
                    fontSize: 18,
                    fontWeight: "bold",
                    color: "#3E455B"
                  }}
                >
                  {data.title}
                </Text>
              </View>
              {text_z}
              <View
                style={{
                  flex: 3
                }}
              >
                <FlatList
                  style={{
                    flex: 1
                  }}
                  ItemSeparatorComponent={() => (
                    <View
                      style={{
                        width: 10
                      }}
                    />
                  )}
                  showsHorizontalScrollIndicator={false}
                  keyExtractor={(item, index) => item.name.toString()}
                  data={data.icon_item}
                  horizontal={true}
                  renderItem={({ item }) => {
                    return (
                      <TouchableOpacity
                        style={{
                          flex: 1,
                          height: "100%",
                          width: this.getWindowWidth() * 0.9
                        }}
                        onPress={() => {
                          alert(item.name);
                        }}
                        activeOpacity={1}
                      >
                        <Image
                          source={{
                            uri: item.icon
                          }}
                          style={{
                            height: "100%",
                            width: "100%",
                            justifyContent: "center",
                            alignItems: "center",
                            borderRadius: 20
                          }}
                        />
                      </TouchableOpacity>
                    );
                  }}
                />
              </View>
            </View>
          </View>
        );
        break;
      case 4:
        let text_z = [];
        let zhezhao = [];
        let view_height = 190;
        //判断是否需要text
        if (data.text != "") {
          view_height = 217;
          text_z.push(
            <View
              key={data.text}
              style={{
                flex: 0.5,
                justifyContent: "center",
                alignItems: "center",
                flexDirection: "row"
              }}
            >
              <View
                style={{
                  flex: 1,
                  flexDirection: "row"
                }}
              >
                <View
                  style={{
                    flex: 0.2
                  }}
                />
                <Text
                  style={{
                    flex: 11,
                    color: "#8F94AA"
                  }}
                >
                  {data.text}
                </Text>
              </View>
            </View>
          );
        }

        return (
          <View
            style={{
              marginTop: 20,
              flex: 1,
              justifyContent: "center",
              alignItems: "center"
            }}
          >
            <View
              style={{
                width: "90%",
                height: view_height,
                flexDirection: "column"
              }}
            >
              <View
                style={{
                  flex: 0.5,
                  justifyContent: "center",
                  alignItems: "center",
                  flexDirection: "row"
                }}
              >
                <View
                  style={{
                    flex: 0.1,
                    height: 14,
                    justifyContent: "flex-start",
                    alignItems: "center",
                    backgroundColor: "#01AFFE",
                    borderRadius: 15
                  }}
                />
                <View
                  style={{
                    flex: 0.1
                  }}
                />
                <Text
                  style={{
                    flex: 11,
                    fontSize: 18,
                    fontWeight: "bold",
                    color: "#3E455B"
                  }}
                >
                  {data.title}
                </Text>
              </View>
              {text_z}
              <View
                style={{
                  flex: 3
                }}
              >
                <FlatList
                  style={{
                    flex: 1
                  }}
                  ItemSeparatorComponent={() => (
                    <View
                      style={{
                        width: 10
                      }}
                    />
                  )}
                  showsHorizontalScrollIndicator={false}
                  keyExtractor={(item, index) => item.name.toString()}
                  data={data.icon_item}
                  horizontal={true}
                  renderItem={({ item }) => {
                    //判断是否需要遮盖层（观看记录）
                    if (data.mask) {
                      zhezhao = [];
                      zhezhao.push(
                        <View
                          key={item.name}
                          style={{
                            flex: 1,
                            width: "100%",
                            flexDirection: "column"
                          }}
                        >
                          <View
                            style={{
                              flex: 2
                            }}
                          />
                          <View
                            style={{
                              flex: 1,
                              backgroundColor: "#344563",
                              width: "100%",
                              borderBottomLeftRadius: 15,
                              borderBottomRightRadius: 15,
                              flexDirection: "row"
                            }}
                          >
                            <View
                              style={{
                                flex: 0.1
                              }}
                            />
                            <View
                              style={{
                                flex: 1
                              }}
                            >
                              <Text
                                style={{
                                  flex: 1,
                                  color: "red",
                                  textAlign: "left"
                                }}
                              >
                                {item.last_time + ":"}
                              </Text>
                              <Text
                                style={{
                                  flex: 1,
                                  color: "red",
                                  textAlign: "left"
                                }}
                              >
                                {item.curriculum_name}
                              </Text>
                            </View>
                          </View>
                        </View>
                      );
                    }
                    return (
                      <TouchableOpacity
                        style={{
                          flex: 1,
                          height: "100%",
                          width: this.getWindowWidth() * 0.22
                        }}
                        onPress={() => {
                          alert(item.name);
                        }}
                        activeOpacity={1}
                      >
                        <View
                          style={{
                            flex: 1,
                            height: "100%",
                            width: "100%",
                            justifyContent: "center",
                            alignItems: "center"
                          }}
                        >
                          <View
                            style={{
                              flex: 5,
                              height: "100%",
                              width: "100%",
                              justifyContent: "center",
                              alignItems: "center"
                            }}
                          >
                            <ImageBackground
                              source={{
                                uri: item.icon
                              }}
                              style={{
                                height: "100%",
                                width: "100%",
                                justifyContent: "center",
                                alignItems: "center"
                              }}
                              imageStyle={{
                                borderRadius: 20
                              }}
                            >
                              {zhezhao}
                            </ImageBackground>
                          </View>

                          <Text
                            style={{
                              justifyContent: "center",
                              alignItems: "center",
                              flex: 1,
                              fontSize: 12
                            }}
                          >
                            {item.name}
                          </Text>
                        </View>
                      </TouchableOpacity>
                    );
                  }}
                />
              </View>
            </View>
          </View>
        );
        break;
      case 5:
        break;
      case 6:
        break;
      case 7:
        break;
      case 8:
        break;
    }
  }
}

const styles = StyleSheet.create({
  title_text: {
    justifyContent: "center",
    alignItems: "center",
    color: "red",
    fontSize: 30,
    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,
  }
  /* 轮播图区域 */
});