RN实现头部NavBar

（1）实现NavBar

import React, {Component, PropTypes} from 'react';import {    AppRegistry,    StyleSheet,    Text,    View,    Dimensions,    Platform} from 'react-native';const {width, height} = Dimensions.get('window');export default class GDNavBar extends Component {    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: 'red',        flexDirection: 'row',//按行排列        justifyContent: 'space-between',        alignItems: 'center',        borderBottomWidth: 0.5,        borderBottomColor: 'gray',        paddingTop: Platform.OS === 'ios' ? 15 : 0,    },});

（2）调用

import React, {Component} from 'react';import {    AppRegistry,    StyleSheet,    Text,    View,    TouchableOpacity,    Image,    ListView,    Dimensions} from 'react-native';import NavBar from '../main/GDNavBar';import Cell from '../main/GDHotCell';const {width, height} = Dimensions.get('window');export default class GDHalfHourHot extends Component {    constructor(props) {        super(props);    }    renderTitleItem() {        return (            <Text style={styles.titleItem}>近半小时热门</Text>        );    };    renderRightItem() {        return (            <TouchableOpacity>                <Text style={styles.rightItem}>关闭</Text>            </TouchableOpacity>        );    };    render() {        return (        //这里left默认没有            <View style={styles.container}>                <NavBar                    titleItem={() => this.renderTitleItem()}                    rightItem={() => this.renderRightItem()}                />            </View>        );    }}const styles = StyleSheet.create({    container: {        flex: 1,        alignItems: 'center',        backgroundColor: 'white',    },    titleItem: {        fontSize: 17,        color: 'black',        marginLeft: 50,    },    rightItem: {        fontSize: 17,        color: 'rgba(123,178,114,1.0)',        marginRight: 15,    },});