/*** 自定义导航栏*/
import React, { Component, PropTypes } from 'react';
import {StyleSheet,Text,View,Dimensions,Platform,
} from 'react-native';// 获取屏幕宽高
const {width, height} = Dimensions.get('window');export default class GDCommunalNavBar extends Component {// 创建成员属性 ES6统一用static管理static propTypes = {leftItem:PropTypes.func,  // 外部传入方法,内部接收titleItem:PropTypes.func,rightItem:PropTypes.func,};// 左边renderLeftItem() {// 判断是否传入值if (this.props.leftItem === undefined) return;// 有值,调用方法,进行初始化return this.props.leftItem();}// 中间renderTitleItem() {if (this.props.titleItem === undefined) return;return this.props.titleItem();}// 右边renderRightItem() {if (this.props.rightItem === undefined) return;return this.props.rightItem();}render() {return (<View style={styles.container}>{/* 左边 */}<View>{this.renderLeftItem()}</View>{/* 中间 */}<View>{this.renderTitleItem()}</View>{/* 右边 */}<View>{this.renderRightItem()}</View></View>);}
}const styles = StyleSheet.create({container: {width:width,height:Platform.OS === 'ios' ? 64 : 44,backgroundColor:'white',flexDirection:'row', // 设置主轴的方向justifyContent:'space-between', // 设置主轴的对齐方式alignItems:'center', // 设置侧轴内容居中borderBottomWidth:0.5,borderBottomColor:'gray',paddingTop:Platform.OS === 'ios' ? 15 : 0,},
});

/*** 首页*/
import React, { Component } from 'react';
import {StyleSheet,Text,View,TouchableOpacity,Image,
} from 'react-native';// 引入自定义导航栏组件
import CommunalNavBar from '../main/GDCommunalNavBar';export default class GDHome extends Component {// 返回左边按钮renderLeftItem() {// 将组件返回出去return(<TouchableOpacity><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,},
});