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,
  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";
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 {
  render() {
    return (
      <View style={{ flex: 1 }}>
        <FlatList
          style={{ flex: 1 }}
          ref="_flatlist"
          horizontal={false}
          removeClippedSubviews={false}
          ListHeaderComponent={() => this.headerorfooterComponent()}
          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>
    );
  }

  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")}
      />
    );
  }

  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>

              <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,
              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>
        );
        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
  }
});