/*** 近半小时热门*/
import React, { Component } from 'react';
import {StyleSheet,Text,View,TouchableOpacity,Image,
} from 'react-native';// 引入自定义导航栏组件
import CommunalNavBar from '../main/GDCommunalNavBar';export default class GDHalfHourHot extends Component {// 返回中间按钮renderTitleItem() {return(<Text style={styles.navbarTitleItemStyle}>近半小时热门</Text>);}// 返回右边按钮renderRightItem() {return(<TouchableOpacity><Text style={styles.navbarRightItemStyle}>关闭</Text></TouchableOpacity>);}render() {return (<View style={styles.container}>{/* 导航栏样式 */}<CommunalNavBartitleItem = {() => this.renderTitleItem()}rightItem = {() => this.renderRightItem()}/></View>);}
}const styles = StyleSheet.create({container: {flex: 1,alignItems: 'center',backgroundColor: '#F5FCFF',},navbarTitleItemStyle: {fontSize:17,color:'black',marginLeft:50},navbarRightItemStyle: {fontSize:17,color:'rgba(123,178,114,1.0)',marginRight:15},
});

/*** 首页*/
import React, { Component } from 'react';
import {StyleSheet,Text,View,TouchableOpacity,Image,
} from 'react-native';// 引入自定义导航栏组件
import CommunalNavBar from '../main/GDCommunalNavBar';
// 引入 近半小时热门组件
import HalfHourHot from './GDHalfHourHot';export default class GDHome extends Component {// 跳转到近半小时热门pushToHalfHourHot() {// this.props 可以获取所有组件属性this.props.navigator.push({component: HalfHourHot,})}// 返回左边按钮renderLeftItem() {// 将组件返回出去return(<TouchableOpacityonPress={() => {this.pushToHalfHourHot()}}><Image source={{uri:'hot_icon_20x20'}} style={styles.navbarLeftItemStyle} /></TouchableOpacity>);}// 返回中间按钮renderTitleItem() {return(<TouchableOpacity><Image source={{uri:'navtitle_home_down_66x20'}} style={styles.navbarTitleItemStyle} /></TouchableOpacity>);}// 返回右边按钮renderRightItem() {return(<TouchableOpacity><Image source={{uri:'search_icon_20x20'}} style={styles.navbarRightItemStyle} /></TouchableOpacity>);}render() {return (<View style={styles.container}>{/* 导航栏样式 */}<CommunalNavBarleftItem = {() => this.renderLeftItem()}titleItem = {() => this.renderTitleItem()}rightItem = {() => this.renderRightItem()}/></View>);}
}const styles = StyleSheet.create({container: {flex: 1,alignItems: 'center',backgroundColor: '#F5FCFF',},navbarLeftItemStyle: {width:20,height:20,marginLeft:15,},navbarTitleItemStyle: {width:66,height:20,},navbarRightItemStyle: {width:20,height:20,marginRight:15,},
});

/*** 近半小时热门 cell*/
import React, { Component, PropTypes } from 'react';
import {StyleSheet,Text,View,Dimensions,Platform,Image,
} from 'react-native';// 获取屏幕宽高
const {width, height} = Dimensions.get('window');export default class GDCommunalHotCell extends Component {// 定义成员属性static propTypes = {image: PropTypes.string,  // 外部传字符串title: PropTypes.string,}render() {return (<View style={styles.container}>{/* 左边的图片 */}<Image source={{uri:this.props.image}} style={styles.imageStyle} />{/* 中间的文字 */}<View><Text numberOfLines={3} style={styles.titleStyle}>{this.props.title}</Text></View>{/* 右边的箭头 */}<Image source={{uri:'icon_cell_rightArrow'}} style={styles.arrowStyle} /></View>);}
}const styles = StyleSheet.create({container: {flexDirection:'row',alignItems:'center',justifyContent:'space-between',backgroundColor:'white',height:100,width:width,borderBottomWidth:0.5,borderBottomColor:'gray',marginLeft:15},imageStyle: {width:70,height:70,},titleStyle: {width:width*0.65,},arrowStyle: {width:10,height:10,marginRight:30}
});

/*** 近半小时热门*/
import React, { Component } from 'react';
import {StyleSheet,Text,View,TouchableOpacity,Image,ListView,Dimensions,
} from 'react-native';// 获取屏幕宽高
const {width, height} = Dimensions.get('window');// 引入自定义导航栏组件
import CommunalNavBar from '../main/GDCommunalNavBar';
// 引入 cell
import CommunalHotCell from '../main/GDCommunalHotCell';export default class GDHalfHourHot extends Component {// 构造constructor(props) {super(props);// 初始状态this.state = {dataSource: new ListView.DataSource({rowHasChanged:(r1, r2) => r1 !== r2}), // 数据源 优化};// 绑定this.fetchData = this.fetchData.bind(this);}// 网络请求fetchData() {fetch('http://guangdiu.com/api/gethots.php')  // 请求地址.then((response) => response.json())  // 定义名称 将数据转为json格式.then((responseData) => { // 处理数据// 修改dataSource的值this.setState({dataSource: this.state.dataSource.cloneWithRows(responseData.data)});}).done() // 结束}popToHome() {this.props.navigator.pop();}// 返回中间按钮renderTitleItem() {return(<Text style={styles.navbarTitleItemStyle}>近半小时热门</Text>);}// 返回右边按钮renderRightItem() {return(<TouchableOpacity><Text style={styles.navbarRightItemStyle}>关闭</Text></TouchableOpacity>);}// 返回每一行cell的样式renderRow(rowData) {// 使用cell组件return(<CommunalHotCellimage={rowData.image}title={rowData.title}/>);}// 生命周期 组件渲染完成 已经出现在dom文档里componentDidMount() {// 请求数据this.fetchData();}render() {return (<View style={styles.container}>{/* 导航栏样式 */}<CommunalNavBartitleItem = {() => this.renderTitleItem()}rightItem = {() => this.renderRightItem()}/>{/* 商品列表 */}<ListViewdataSource={this.state.dataSource}  // 数据源 通过判断dataSource是否有变化,来判断是否要重新渲染、renderRow={this.renderRow}showsHorizontalScrollIndicator={false} // 隐藏水平线style={styles.listViewStyle}/></View>);}
}const styles = StyleSheet.create({container: {flex:1,alignItems: 'center',},navbarTitleItemStyle: {fontSize:17,color:'black',marginLeft:50},navbarRightItemStyle: {fontSize:17,color:'rgba(123,178,114,1.0)',marginRight:15},listViewStyle: {width:width,}
});