/**
* 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
} from "react-native";
import Swiper from "react-native-swiper";
import AndroidUtil from "../../util/AndroidUtil";
import BasePage from "../BasePage";
import Header from "./Header";
import Swipers from "./Swiper";
import Dimensions from '../utils/dimensions'
export default class MainPage extends BasePage {
constructor(props) {
super(props);
this.state = {
grade: '大学',
text: '小伙子'
}
}
render() {
return (
<View style={{ flex: 1 }}>
<FlatList
style={{ flex: 1 }}
ref="_flatlist"
horizontal={false}
removeClippedSubviews={false}
ListHeaderComponent={() => this.headerorfooterComponent()}
// searchSection={() => this.renderSearchSection()}
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>
);
}
// flat 头部组件
headerorfooterComponent() {
return (
<View>
<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")}
/>
{/* 搜索区域 */}
<View style={styles.searchSection}>
<TextInput
style={styles.searchBox}
onChangeText={(text) => this.setState({ text })}
value={this.state.text}
/>
<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>
</View>
</View>
);
}
loadFlatItem(data) {
switch (data.typea) {
// case 0:
// return (
// <View
// style={{
// height: 50,
// width: "100%",
// justifyContent: "center",
// alignItems: "center",
// backgroundColor: "red"
// }}
// >
// <View
// style={{
// height: "60%",
// justifyContent: "center",
// alignItems: "center",
// width: "90%",
// backgroundColor: "green",
// 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={{
height:193,
flex: 1,
justifyContent: "center",
alignItems: "center",
flexDirection: "row",
backgroundColor: 'red'
}}
>
<View
style={{
// width: "90%",
width: Dimensions.width,
// overflow: "hidden",
height: 150
}}
>
<Swipers
autoplay={true}
loop={true}
ifShowMiddle={true}
/>
</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
},
/* 搜索区域 */
searchSection: {
flex: 1,
width: Dimensions.width,
height: 60,
flexDirection: 'row',
alignItems: 'center',
backgroundColor: '#f0f1f5',
justifyContent: 'space-around'
},
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,
}
/* 轮播图区域 */
});