123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217 |
- /**
- * Created by zack on 2018/4/19.
- */
- import {
- View,
- Text,
- Image,
- StyleSheet,
- TouchableHighlight,
- ImageBackground
- } from 'react-native'
- import React, { Component } from 'react'
- import ScreenDimensions from '../../../utils/ScreenDimensions'
- import ScreenDimensionsClientHeight from '../../../utils/ScreenDimensions'
- import NavigationBarHeight from '../../../utils/NavigationBarHeight'
- import TabBarHeight from '../../../utils/TabBarHeight'
- import RefreshInfiniteListView from '../../../utils/RefreshInfiniteListView'
-
- //ScreenDimensions.clientHeight
- const clientHeight = ScreenDimensions.clientHeight;
- export default class SmallVideoViewController extends Component {
-
- constructor(props) {
- super(props)
- this.state = {
-
- }
- }
-
- componentDidMount() {
- var data = [];
- let titles = ["如何在5分钟内记住100个单词", "Moira带你边走边学", "金融职员必备英语", "美式英语与英式英语的区别"];
- let users = ['Micheal', 'Moira', 'Nahila', 'Ahmed'];
- let watchs = ['241', '2万', '3574', '4.6万'];
- for (var i = 1; i < 5; i++) {
- data.push({
- key: i - 1,
- ima: "img_" + i,
- title: titles[i - 1],
- user: users[i - 1],
- watch: watchs[i - 1]
- });
- }
- this.list.setData(data)
- }
-
- render() {
- return (
- <View style={styles.View}>
- <RefreshInfiniteListView
- style={styles.flatListStyle}
- numColumns={2}
- onScroll={()=>{
-
- }}
- ref={this.listRef.bind(this)}
- renderItem={this.renderRow.bind(this)}
- onRefresh={this.onRefresh.bind(this)}
- onEndReached={this.onInfinite.bind(this)}>
- </RefreshInfiniteListView>
- </View>
- );
- }
- renderRow(item) {
- let uer = require('../../../resources/images/TabBar/Community/SmallVideo/img_4.png');
-
- let uerIcon = require('../../../resources/images/TabBar/Community/SmallVideo/user_3.png');
-
- let addIcon = require('../../../resources/images/TabBar/Community/SmallVideo/follow.png');
- return (
- <TouchableHighlight
- underlayColor={"white"}
- onPress={this.onPress.bind(this)}>
- <View style={item.index / 2 == 0 ? styles.cellLeftStyle : styles.cellRightStyle}>
- <ImageBackground source={uer} style={styles.ImageView}>
- <ImageBackground source={require('../../../resources/images/TabBar/Community/SmallVideo/bg.png')} style={styles.bottomImage} >
- <Text style={styles.titleStyle}>{item.title}</Text>
- <View style={styles.bottomStyle}>
- <View style={styles.bottomLeftStyle}>
- <View style={styles.headImage}>
- <Image source={uerIcon} style={styles.userIcon} />
- <Image source={addIcon} style={styles.followStyle} />
- </View>
- <Text style={styles.nameStyle}>{item.user}</Text>
-
- </View>
- <View style={styles.bottomRightStyle}>
- <Text style={styles.numberStyle}>{item.watch}</Text>
- <Image source={require('../../../resources/images/TabBar/Community/SmallVideo/view.png')} style={styles.watchStyle} />
-
- </View>
- </View>
- </ImageBackground>
- </ImageBackground>
- </View>
- </TouchableHighlight>
- )
- }
- listRef(node) {
- this.list = node;
- }
- onRefresh() {
- //下拉刷新
- this.list.setRefreshing(true);
- this.requestData(false)
- }
- onInfinite() {
- //上拉加载
- this.requestData(true)
- }
- requestData(isLoadMore) {
- this.list.setRefreshing(false);
- if (isLoadMore) {
- console.log("上啦中=======")
- } else {
- console.log("下啦中=======")
- }
-
-
- }
- onPress() {
- // this.hideTabBar()
- this.props.callSmallback();
- }
- }
- const styles = StyleSheet.create({
- flatListStyle: {
- width: ScreenDimensions.width,
- height: ScreenDimensions.height - NavigationBarHeight.height - TabBarHeight.height,
- },
- View: {
- width: ScreenDimensions.width,
- height: ScreenDimensions.height,
- // marginTop: NavigationBarHeight.height ,
- },
- rowStyle: {
- width: ScreenDimensions.width / 2,
- height: 200,
- },
- ImageView: {
- width: ScreenDimensions.width / 2 - 3,
- height: clientHeight / 2 - 1,
- justifyContent: "flex-end"
- },
- cellLeftStyle: {
- width: ScreenDimensions.width / 2,
- paddingLeft: 2,
- paddingRight: 1,
- marginTop: 1,
- height: clientHeight / 2,
- },
- cellRightStyle: {
- width: ScreenDimensions.width / 2,
- paddingLeft: 1,
- paddingRight: 2,
- marginTop: 1,
- height: clientHeight / 2,
- },
- bottomImage: {
- width: "100%",
- height: 171 / 512 * clientHeight / 2,
- marginBottom: 0,
- },
- titleStyle: {
- marginHorizontal: 11,
- color: "#fff",
- fontSize: 15,
- flex: 1
- },
- bottomStyle: {
- justifyContent: "space-between",
- flexDirection: "row",
- flex: 1.5,
- marginBottom: 10
- },
- bottomLeftStyle: {
- flex: 1,
- alignItems: "flex-end",
- flexDirection: "row",
- },
- nameStyle: {
- fontSize: 14,
- color: "#ffffff",
- marginLeft: 5
- },
- headImage: {
- flexDirection: "row"
- },
- bottomRightStyle: {
- flex: 1,
- alignItems: "flex-end",
- flexDirection: "row",
- justifyContent: "flex-end"
- },
- userIcon: {
- width: 40,
- height: 40,
- marginLeft: 11,
- },
- followStyle: {
- width: 12,
- height: 12,
- marginTop: 30,
- marginLeft: -15
- },
- watchStyle: {
- width: 17,
- height: 11,
- marginBottom: 2,
- marginRight: 8,
- marginLeft: 2
- },
- numberStyle: {
- fontSize: 14,
- color: "#ffffff"
- }
- })
|