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 MySwiper from "./Swiper";
import Dimensions from '../utils/dimensions';
import TopicTitle from './TopicTitle';

export default class MainPage extends BasePage {
  constructor(props) {
    super(props);
    this.state = {
      grade: '大学',
      text: '小伙子'
    }
  }

  render() {
    return (
      <View style={{ flex: 1 }}>

        <FlatList
          style={{ flex: 1, backgroundColor: 'f0f1f5' }}
          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>

    );
  }

  getSwiperElement() {
    return (
      <View
        style={{
          height: 193,
          flex: 1,
          justifyContent: "center",
          alignItems: "center",
          flexDirection: "row",
        }}
      >
        <View
          style={{
            // width: Dimensions.width,
            width: Dimensions.getDp(358),
            height: Dimensions.getDp(150),
            justifyContent: "center",
            overflow: 'hidden'
          }}
        >
          <MySwiper
            autoplay={true}
            loop={true}
            ifShowMiddle={true}
          />
        </View>
      </View>
    );
  }

  getScheduleElement(data) {
    let arr = [];
    let index = 0;
    for (let item of data.item.icon_item) {
      arr.push(
        <TouchableOpacity
          style={{ width: 172, height: 86, marginRight: 12, backgroundColor: 'red' }}
          onPress={() => {
            alert(item.name);
          }}
          key={index}
          activeOpacity={1}
        >
          <Image
            source={{
              uri: item.icon
            }}
            key={index}
            style={{
              flex: 1,
              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={{
          flex: 1,
          flexDirection: "column",
          height: 140,
          backgroundColor: 'blue'
        }}
      >
        <TopicTitle title={'课程表：第一周'} ifTubeShow={true} />
        <View
          style={{
            flex: 2,
            flexDirection: "row",
            backgroundColor: 'green',
            alignItems: 'center',
            paddingLeft: 10
          }}
        >
          {arr}
        </View>
      </View>
    );
  }

  loadFlatItem(data) {
    switch (data.typea) {
      case 1:
        return this.getSwiperElement();
        break;
      case 2:
        return this.getScheduleElement(data);
        break;
      case 3:
        return (
          <View
            style={{
              marginTop: 20,
              flex: 1,
              justifyContent: "center",
              alignItems: "center",
              backgroundColor: 'blue'
            }}
          >
            <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: "green",
                    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,
  }
  /* 轮播图区域 */
});