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 LibraryUrl from '../services/library'
import { ScrollView } from "react-native-gesture-handler";

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

  componentDidMount() {
    LibraryUrl.getIndex('PRESCHOOL').success(res => {
      console.log(res)
      const monthTopicTitle = res.data.monthTopic.zone.title;
      const monthTopicScroll = res.data.monthTopic.zoneCourseVOList;
      const schedule = res.data.schedule;
      const hotCourse = res.data.hotCourse;
      const recommend = res.data.recommend; //全部课程
      const banner = res.data.banner; //轮播图
      // const listData = [];
      // for(let item in res.data){
      //   console.log(item)
      //   listData.push(1)
      // }
      // console.log(typeof listData)
      // console.log(listData)
      // console.log(listData.length)
      this.setState({
        // listData: listData.length? listData : [],
        hotCourse,
        monthTopicTitle,
        monthTopicScroll,
        schedule,
        recommend,
        banner
      })
      console.log(this.state.banner)
    })
  }

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

  render() {
    // const abc =Object.keys(this.state.data).map((k)=>this.state.data[k])
    return (
      <View style={{ flex: 1 }} onPress={this.hideGradeMenu}>
        {/* <SectionList     sectionList组件 性能好 但是针对当前布局是否有要用的必要，以后可能迭代
          sections={this.state.listData}
          renderItem={({ item }) => {
            return this.loadFlatItem(item);
          }}
          keyExtractor={(item, index) => item.key.toString()}
          ListHeaderComponent={() => this.headerorfooterComponent()}
          renderSectionHeader={this.sectionTitle}
          onScroll={this.hideGradeMenu}
        /> */}
        <ScrollView style={{ height: Dimensions.height }} >
          {this.headerorfooterComponent()}
          {this.getSwiperElement()}
          {this.getScheduleElement()}
          {this.getMonthTopic()}
          {this.getHotCourse()}
          {this.getAllCourses()}
        </ScrollView>

        {
          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() {
    return (
      <View
        style={{
          height: Dimensions.getDp(163),
          flex: 1,
          justifyContent: "center",
          alignItems: "center",
          flexDirection: "row",
        }}
      >
        <View
          style={{
            width: Dimensions.getWidth(358),
            height: Dimensions.getDp(153),
            justifyContent: "center",
            overflow: 'hidden'
          }}
        >
          <MySwiper
            autoplay={true}
            loop={true}
            ifShowMiddle={true}
            data={this.state.banner}
          />
        </View>
      </View>
    );
  }
  // 渲染课程表
  getScheduleElement() {
    let renderScheduleItem = (item, index) => {
      return (
        <TouchableOpacity
          style={{ width: 172, height: 86, marginRight: 12 }}
          onPress={() => {
            alert(Dimensions.width.toString());
          }}
          key={index}
          activeOpacity={1}
        >
          <Image
            source={{
              uri: item.boothContent
            }}
            key={index}
            style={{
              flex: 1,
              justifyContent: "center",
              alignItems: "center",
              borderRadius: 10

            }}
          />
        </TouchableOpacity>
      )
    }
    return (
      <View
        style={{
          flex: 1,
          flexDirection: "column",
          height: 160,
        }}
      >
        <TopicTitle title={'课程表：第一周'} ifTubeShow={true} />
        <View
          style={{
            flex: 2,
            flexDirection: "row",
            alignItems: 'center',
            paddingLeft: 10
          }}
        >
          {this.state.schedule.map((item, index) => renderScheduleItem(item, index))}
        </View>
      </View>
    );
  }
  // 渲染月主题
  getMonthTopic() {
    return (
      <View style={{
        flex: 1,
        height: 225,
      }}>
        <TopicTitle title={this.state.monthTopicTitle} summary={'每天30分钟'} ifTubeShow={true} />
        <ScrollRow itemWidth={352} itemHeight={153} data={this.state.monthTopicScroll} />
      </View>

    );
  }
  // 渲染热门课程
  getHotCourse() {
    return (
      <View style={{
        flex: 1,
        height: 220,
      }}>
        <TopicTitle title={'热门课程'} ifTubeShow={true} />
        <ScrollRow itemWidth={106} itemHeight={150} data={this.state.hotCourse} />
      </View>
    )
  }
  // 渲染全部课程
  getAllCourses() {
    return (
      <View>
        {this.state.recommend.map((item, index) => {
          return (
            <View
              style={{
                flex: 1,
                height: 240,
              }}
              key={index}
            >
              {index === 0
                ?
                null
                :
                <View style={{ width: Dimensions.width, height: 4, backgroundColor: '#f0f1f5' }}></View>
              }
              <TopicTitle title={item.zone.title} />
              <ScrollRow itemWidth={106} itemHeight={150} data={item.zoneCourseVOList} />
            </View>
          )
        })}
      </View>


    )
  }
  // 渲染每一个块儿  sectionList组件的data，没有用到，以后可能会用
  loadFlatItem(data) {


    switch (data.title) {
      // 轮播图
      case 'banner':
        return this.getSwiperElement();
        break;
      // 课程表
      case 'schedule':
        return this.getScheduleElement();
        break;
      // 大图主题
      case 'monthTopic':
        return this.getMonthTopic();
        break;
      // 热门课程
      case 'hotCourse':
        return this.getHotCourse();
        break;
      case 'recommend':
        return this.getAllCourses();
        break;
      default:
        break;
    }
  }
  // 渲染每一个section的title  sectionList组件的data，没有用到，以后可能会用
  sectionTitle = (info) => {
    switch (info.section.title) {
      case 'operation':
        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: "第五张图片文字"
        }
      ]
    },]
  }
]