/**
* 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,
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";
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 MainPage extends BasePage {
render() {
return (
<View style={{ flex: 1 }}>
<FlatList
style={{ flex: 1 }}
ref="_flatlist"
horizontal={false}
removeClippedSubviews={false}
ListHeaderComponent={() => this.headerorfooterComponent()}
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>
);
}
headerorfooterComponent() {
return (
<Header
uri="https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=1295208965,3056573814&fm=26&gp=0.jpg"
width={400}
height={150}
username="卡通笨笨熊"
flowerNumber="123234"
onPress={() => this.toNextPage("MainActivity")}
/>
);
}
loadFlatItem(data) {
switch (data.typea) {
case 0:
return (
<View
style={{
height: 50,
width: "100%",
justifyContent: "center",
alignItems: "center",
backgroundColor: "#F8F8F8"
}}
>
<View
style={{
height: "60%",
justifyContent: "center",
alignItems: "center",
width: "90%",
backgroundColor: "#ffffffff",
borderRadius: 20,
flexDirection: "row"
}}
>
<View style={{ flex: 0.2 }} />
<Text
numberOfLines={1}
style={{
flex: 12,
justifyContent: "center",
alignItems: "center",
fontSize: 18,
fontWeight: "bold",
color: "#3E455B"
}}
>
{data.title}
</Text>
<View
style={{
flex: 1,
height: "100%",
justifyContent: "center",
alignItems: "center"
}}
>
<Image
source={{
uri:
"https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=1295208965,3056573814&fm=26&gp=0.jpg"
}}
style={{
width: "50%",
height: "50%",
justifyContent: "center",
alignItems: "center",
borderRadius: 30
}}
/>
</View>
</View>
</View>
);
break;
case 1:
return (
<View
style={{
marginTop: 10,
flex: 1,
justifyContent: "center",
alignItems: "center",
flexDirection: "row"
}}
>
<View
style={{
width: "90%",
overflow: "hidden",
height: 150
}}
>
<Swiper
style={{ flex: 1 }}
horizontal={true}
autoplayTimeout={3}
autoplay={true}
activeDotColor="#fff"
>
<View key="1" style={{ flex: 1 }}>
<Image
source={{
uri:
"https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=1295208965,3056573814&fm=26&gp=0.jpg"
}}
style={{
width: "100%",
height: "100%",
justifyContent: "center",
alignItems: "center",
borderRadius: 10
}}
/>
</View>
<View key="2" style={{ flex: 1 }}>
<TouchableOpacity
activeOpacity={1}
onPress={() => this.toNextPage("MainActivity")}
>
<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={{
width: "100%",
height: "100%",
justifyContent: "center",
alignItems: "center",
borderRadius: 10
}}
/>
</TouchableOpacity>
</View>
</Swiper>
</View>
</View>
);
break;
case 2:
let arr = [];
let index = 0;
for (let item of data.item.icon_item) {
arr.push(
<TouchableOpacity
style={{ flex: 2 }}
onPress={() => {
alert(item.name);
}}
key={index}
activeOpacity={1}
>
<Image
source={{
uri: item.icon
}}
key={index}
style={{
width: "100%",
height: "100%",
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={{
marginTop: 20,
flex: 1,
justifyContent: "center",
alignItems: "center"
}}
>
<View
style={{
flex: 1,
flexDirection: "column",
width: "90%",
height: 150
}}
>
<Text
style={{
flex: 0.5,
fontSize: 18,
fontWeight: "bold",
color: "#3E455B"
}}
>
{data.item.title}
</Text>
<View
style={{
flex: 2,
flexDirection: "row",
justifyContent: "space-between"
}}
>
{arr}
</View>
</View>
</View>
);
break;
case 3:
return (
<View
style={{
marginTop: 20,
flex: 1,
justifyContent: "center",
alignItems: "center"
}}
>
<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: "#01AFFE",
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
}
});