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";
import CusVideo from "./CusVideo";
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 {
  constructor(props) {
    super(props);
    this.state = {
      videoImg_flex: 1,
      videoImg_width: "100%",
      videoImg_height: "100%",
      video_flex: 0,
      video_width: "0%",
      video_height: "0%",
      video_uri:
        "https://www.apple.com/105/media/cn/iphone-x/2017/01df5b43-28e4-4848-bf20-490c34a926a7/films/feature/iphone-x-feature-cn-20170912_1280x720h.mp4"
    };
  }

  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%"
          }}
        >
          <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: this.state.videoImg_flex,
              width: this.state.videoImg_width,
              height: this.state.videoImg_height
            }}
          />
          <CusVideo
            uri={this.state.video_uri}
            ref={view => (this.video = view)}
            style={{
              flex: this.state.video_flex,
              width: this.state.video_width,
              height: this.state.video_height
            }}
          />
        </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"
              },
              {
                key: 11,
                typecolor: "#74E0FF",
                typename: "习惯养成",
                videoname: "碗里不剩一粒米",
                videourl: "碗里不剩一粒米xxxx"
              },
              {
                key: 12,
                typecolor: "#FB5B76",
                typename: "品格礼仪",
                videoname: "我有很多朋友",
                videourl: "我有很多朋友xxxx"
              },
              {
                key: 13,
                typecolor: "#EC48E1",
                typename: "自我保护",
                videoname: "小猫喵喵叫",
                videourl: "小猫喵喵叫xxxx"
              },
              {
                key: 14,
                typecolor: "#39D6B9",
                typename: "亲子游戏",
                videoname: "安静的睡前游戏-全家人都睡了",
                videourl:
                  "https://www.apple.com/105/media/cn/iphone-x/2017/01df5b43-28e4-4848-bf20-490c34a926a7/films/feature/iphone-x-feature-cn-20170912_1280x720h.mp4"
              },
              {
                key: 15,
                typecolor: "#3397F0",
                typename: "欢乐音乐",
                videoname: "小鸡捉虫子",
                videourl:
                  "http://efunvideo.ai160.com/vs2m/056/05602002/05602002001/05602002001.m3u8"
              }
            ]}
          />
        </View>
      </View>
    );
  }
  loadFlatItem(data) {
    return (
      <ScheduleFlatItem
        width={this.getWindowWidth() * 0.95}
        height={60}
        data={data}
        onPress={() => this.aa(data.videourl)}
      />
    );
  }

  aa(url) {
    //切换视频并且播放
    alert(url);
    this.setState({
      videoImg_flex: 0,
      videoImg_width: "0%",
      videoImg_height: "0%",
      video_flex: 1,
      video_width: "100%",
      video_height: "100%",
      video_uri: url
    });
    this.video.refreshVideo();
    this.video.play();
  }
}