RN实现头部NavBar

（1）实现NavBar

代码语言：javascript复制

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）调用

代码语言：javascript复制

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,
    },
});

navbar

0 人点赞