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

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

import React, { Component } from "react";
import {
  Platform,
  StyleSheet,
  Text,
  View,
  Image,
  TouchableOpacity,
  ImageBackground,
  FlatList,
  Button,
  DeviceEventEmitter
} from "react-native";
import AndroidUtil from "../../util/AndroidUtil";
import BasePage from "../BasePage";
import CourseTitle from "./CourseTitle";
import ScheduleFlatItem from "./ScheduleFlatItem";
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 SchedulePage extends BasePage {
  render() {
    return (
      <View
        style={{
          flex: 1,
          backgroundColor: "#F3F3F3",
          justifyContent: "center",
          alignItems: "center"
        }}
      >
        <View style={{ flex: 50 }}>
          <CourseTitle
            width={this.getWindowWidth()}
            title="第12周 爱上幼儿园"
            // backPress={() => this.goBack()}
            backPress={() => alert("点击返回")}
            sharedpress={() => alert("点击分享")}
          />
        </View>
        <View
          style={{
            flex: 281,
            width: "100%",
            justifyContent: "center",
            alignItems: "center"
          }}
        >
          <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={{
              flex: 1,
              width: "100%",
              height: "100%"
            }}
          />
        </View>
        <View style={{ flex: 10 }} />
        <View
          style={{
            flex: 505,
            justifyContent: "center",
            alignItems: "center",
            width: "100%"
          }}
        >
          <FlatList
            ItemSeparatorComponent={() => (
              <View
                style={{
                  height: 10
                }}
              />
            )}
            renderItem={({ item }) => {
              return this.loadFlatItem(item);
            }}
            keyExtractor={(item, index) => item.key.toString()}
            horizontal={false}
            data={[
              {
                key: 1,
                typecolor: "#74E0FF",
                typename: "习惯养成",
                videoname: "碗里不剩一粒米",
                videourl: "xxxx"
              },
              {
                key: 2,
                typecolor: "#FB5B76",
                typename: "品格礼仪",
                videoname: "我有很多朋友",
                videourl: "xxxx"
              },
              {
                key: 3,
                typecolor: "#EC48E1",
                typename: "自我保护",
                videoname: "小猫喵喵叫",
                videourl: "xxxx"
              },
              {
                key: 4,
                typecolor: "#39D6B9",
                typename: "亲子游戏",
                videoname: "安静的睡前游戏-全家人都睡了",
                videourl: "xxxx"
              },
              {
                key: 5,
                typecolor: "#3397F0",
                typename: "欢乐音乐",
                videoname: "小鸡捉虫子",
                videourl: "xxxx"
              }
            ]}
          />
        </View>
      </View>
    );
  }
  loadFlatItem(data) {
    return (
      <ScheduleFlatItem
        width={this.getWindowWidth() * 0.95}
        height={60}
        data={data}
      />
    );
  }
}