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,
  SectionList,
  Animated,
  TouchableHighlight
} 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';
import ScrollRow from "./ScrollRow";
// import console from 'console';

export default class MainPage extends BasePage {
  constructor(props) {
    super(props);
  }

  state = {
    grade: '大学',
    text: '小伙子',
    ifGradeMenuShow: false,
    fadeAnim: new Animated.Value(0),
  }

  render() {
    return (
        <View style={{ flex: 1 }} onPress={this.hideGradeMenu}>
          {/* 尝试切换为sectionList 分组显示 */}
          <SectionList
            sections={sectionData}
            renderItem={({ item }) => {
              return this.loadFlatItem(item);
            }}
            keyExtractor={(item, index) => item.key.toString()}
            ListHeaderComponent={() => this.headerorfooterComponent()}
            renderSectionHeader={this.sectionTitle}
            onScroll={this.hideGradeMenu}
          />
          {
            this.state.ifGradeMenuShow ? (
              <Animated.View
                style={{
                  ...styles.callUpGrade,
                  opacity: this.state.fadeAnim
                }}>
                <View style={styles.gradeItem}>
                  <Text style={styles.gradeText}>小学</Text>
                </View>
                <View style={styles.gradeItemMid}>
                  <Text style={styles.gradeText}>学前</Text>
                </View>
                <View style={styles.gradeItem}>
                  <Text style={styles.gradeText}>中学</Text>
                </View>
              </Animated.View>
            ) : (
                null
              )

          }
        </View>
    );
  }

  // 头部组件
  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("userCenter")}
        />
        {/* 搜索区域 */}
        <View style={styles.searchSection}>
          <TextInput
            style={styles.searchBox}
            onChangeText={(text) => this.setState({ text })}
            value={this.state.text}
          />
          <TouchableOpacity onPress={this.tabCallOutHandler}>
            <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>
          </TouchableOpacity>

        </View>
      </View>

    );
  }
  // 渲染轮播图
  getSwiperElement() {
    console.log('进入swiper')
    return (
      <View
        style={{
          height: Dimensions.getDp(163),
          flex: 1,
          justifyContent: "center",
          alignItems: "center",
          flexDirection: "row",
          // backgroundColor: 'red'
        }}
      >
        <View
          style={{
            // width: Dimensions.width,
            width: Dimensions.getWidth(358),
            height: Dimensions.getDp(153),
            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 }}
          onPress={() => {
            alert(Dimensions.width.toString());
          }}
          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: 160,
          // backgroundColor: 'blue'
        }}
      >
        <TopicTitle title={'课程表：第一周'} ifTubeShow={true} />
        <View
          style={{
            flex: 2,
            flexDirection: "row",
            // backgroundColor: 'green',
            alignItems: 'center',
            paddingLeft: 10
          }}
        >
          {arr}
        </View>
      </View>
    );
  }
  // 渲染每一个块儿
  loadFlatItem(data) {
    console.log(data)
    console.log(data.typea)
    switch (data.typea) {
      // 轮播图
      case 1:
        console.log(1)
        return this.getSwiperElement();
        break;
      // 课程表
      case 2:
        console.log(2)
        return this.getScheduleElement(data);
        break;
      // 大图主题
      case 3:
        console.log(3)
        return (
          <View style={{
            flex: 1,
            height: 225,
          }}>
            <TopicTitle title={'五月主题：五月主题，去看看不同的世界'} summary={'每天30分钟'} ifTubeShow={true} />
            <ScrollRow itemWidth={352} itemHeight={153} />
          </View>

        );
        break;
      // 热门课程
      case 4:
        return (
          <View style={{
            flex: 1,
            height: 220,
          }}>
            <TopicTitle title={'热门广场'} ifTubeShow={true} />
            <ScrollRow itemWidth={106} itemHeight={150} />
          </View>
        )
        break;
      case 5:
        return (
          <View style={{
            flex: 1,
            height: 240,
          }}>
            <TopicTitle title={'生活好榜样'} summary={'死数据不是动态渲染'} />
            <ScrollRow itemWidth={106} itemHeight={150} />
          </View>
        )
        break;
      default:
        break;
    }
  }
  // 渲染每一个section的title
  sectionTitle = (info) => {
    console.log(info)
    switch (info.section.title) {
      case 'operation':
        console.log('进入运营区头部', info.section.title)
        return (
          <View
            style={{
              width: Dimensions.width,
              height: 10,
              backgroundColor: '#f0f1f5'
            }}
          />
        );
        break;
      case 'courses':
        return <TopicTitle title={'全部课程'} tubeColor={'#7d9fff'} background={'#f0f1f5'} ifTubeShow={true} />
        break;
      default:
        break;
    }
  }

  // 点击呼出学龄菜单
  tabCallOutHandler = () => {
    this.setState({
      ifGradeMenuShow: !this.state.ifGradeMenuShow
    }, () => {
      Animated.timing(
        this.state.fadeAnim,
        {
          toValue: this.state.ifGradeMenuShow ? 1 : 0,
          duration: 300,
        }
      ).start();
    })
  }

  // 如果切换学龄在显示状态，那么在它失去焦点时将它隐藏
  hideGradeMenu = () => {
    if (this.state.ifGradeMenuShow) {
      this.setState({
        ifGradeMenuShow: false
      })
    }
  }
}

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',
    position: 'relative',
  },
  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,
  },
  callUpGrade: {
    width: 113,
    height: 120,
    borderRadius: 20,
    position: 'absolute',
    right: 9,
    top: 125,
    zIndex: 999,
    elevation: 999,
    backgroundColor: '#fff',
    flexDirection: 'column'
  },
  gradeItem: {
    zIndex: 999,
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
  },
  gradeItemMid: {
    zIndex: 999,
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
    borderTopWidth: 1,
    borderBottomWidth: 1,
    borderColor: '#f0f1f5'
  },
  gradeText: {
    color: '#151515',
    fontSize: 18,
  }
});

const sectionData = [
  {
    title: 'swiper',
    data: [{
      //轮播
      key: 111,
      typea: 1,
      text: "第一种类型"
    },
    {
      //只有一个标题下面两个图片
      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: "第二张图片文字"
          }
        ]
      }
    },]
  },
  {
    title: 'operation',
    data: [{
      //一个标题，大长图
      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: "第五张图片文字"
        }
      ]
    },]
  },
  {
    title: 'courses',
    data: [{
      //一个标题，大长图
      key: 444,
      typea: 5,
      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: 5,
      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: "第五张图片文字"
        }
      ]
    },]
  }
]