前言

眼看很多公司都開始嘗試使用ReactNative,達(dá)到跨平臺(tái)開發(fā)，最近也寫了很多文章，希望讓更多想了解的同學(xué)快速上手ReactNative.

如果喜歡我的文章，可以關(guān)注我微博:袁崢Seemygo

ReactNative之自定義導(dǎo)航條

• 用RN開發(fā)App,肯定需要用到導(dǎo)航條，系統(tǒng)自帶的導(dǎo)航條不好用，一般都需要自定義導(dǎo)航條。
• 自定義導(dǎo)航條思想:模仿iOS導(dǎo)航控制器封裝了一套R(shí)N的導(dǎo)航條
• 自定義導(dǎo)航條暴露屬性
  • 導(dǎo)航條展示什么控件，全部由外界傳進(jìn)來，這樣設(shè)計(jì)，拓展性比較好

 static propTypes = {
        // 左邊按鈕
        leftBarButtonItem:PropTypes.object,
        // 中間View
        middleView:PropTypes.object,
        // 右邊按鈕
        rightBarButtonItem:PropTypes.object,
        // 中間標(biāo)題
        title:PropTypes.string,
        // 中間標(biāo)題樣式
        titleStyle:PropTypes.object,
        // 導(dǎo)航條整個(gè)內(nèi)容,完全由自己自定義
        contentView:PropTypes.object
    };

自定義導(dǎo)航條封裝代碼

/**
 * Created by ithinkeryz on 2017/5/15.
 */

import React, { Component,PropTypes } from 'react';

import {
    AppRegistry,
    StyleSheet,
    Text,
    View,
    Dimensions
} from 'react-native';

import Common from './Common'

const NavigatorBarHeight = 64;

export default class CommonNavigationBar extends Component {

    // 暴露屬性
    static propTypes = {
        // 左邊按鈕
        leftBarButtonItem:PropTypes.object,
        // 中間View
        middleView:PropTypes.object,
        // 右邊按鈕
        rightBarButtonItem:PropTypes.object,
        // 中間標(biāo)題
        title:PropTypes.string,
        // 中間標(biāo)題樣式
        titleStyle:PropTypes.object,
        // 導(dǎo)航條整個(gè)內(nèi)容,完全由自己自定義
        contentView:PropTypes.object
    };

    constructor(props){
        super(props);

        // 不能同時(shí)設(shè)置中間標(biāo)題和中間View
        if (this.props.title && this.props.middleView)  throw "導(dǎo)航控制器不能同時(shí)設(shè)置title,middleView"

        // 設(shè)置了contentView,不要同時(shí)設(shè)置其他屬性
        if (this.props.contentView && (this.props.middleView ||
            this.props.rightBarButtonItem || this.props.title  ||
            this.props.titleStyle || this.props.contentView)
        ) throw "設(shè)置了contentView,其他設(shè)置無效,不要同時(shí)設(shè)置"

    }

    // 渲染內(nèi)容層
    renderContentView(){
        return (
            <View style={styles.contentViewStyle}>
                {/*左邊*/}
                <View style={styles.leftStyle}>
                    {this.props.leftBarButtonItem}
                </View>

                {/*中間*/}
                <View style={styles.middleStyle}>
                    {this.props.title?this.renderMiddleTitle():this.props.middleView}
                </View>

                {/*右邊*/}
                <View style={styles.rightStyle}>
                    {this.props.rightBarButtonItem}
                </View>
            </View>
        )
    }

    // 渲染中間標(biāo)題
    renderMiddleTitle(){
        return <Text style={[styles.middleTitleStyle,this.props.titleStyle]}>{this.props.title}</Text>
    }

    render() {
        return (
            <View style={[styles.barStyle,this.props.barStyle]}>
                {this.props.contentView?this.props.contentView:this.renderContentView()}
            </View>
        );
    }
}

var styles = StyleSheet.create({
    barStyle:{
        backgroundColor:'white',
        width:Common.screenW,
        height:NavigatorBarHeight,
        flexDirection:'row'
    },
    contentViewStyle:{
        flexDirection:'row',
        width:Common.screenW,
        height:44,
        backgroundColor:'white',
        position:'absolute',
        bottom:0
    },
    leftStyle:{
        flex:1,
        justifyContent:'center',
        alignItems:'center'
    },
    middleStyle:{
        flex:4,
        justifyContent:'center',
        alignItems:'center'
    },
    rightStyle:{
        flex:1,
        justifyContent:'center',
        alignItems:'center'
    },
    middleTitleStyle:{
        fontSize:20,
        color:'black',
        fontWeight:'bold'
    }
});

自定義導(dǎo)航條使用

• 這樣封裝，使用非常簡(jiǎn)單
• 封裝思想：易用，可擴(kuò)展，兩個(gè)條件都達(dá)到了

export default class Reading extends Component {

    render() {
        return (
            <View style={styles.viewStyle}>
                <CommonNavigationBar middleView={this.renderMiddleView()}
                                     leftBarButtonItem={this.renderLeftBarButtonItem()}
                                     rightBarButtonItem={this.renderRightBarButtonItem()}
                />

            </View>
        );
    }


    renderMiddleView(){
        return (
            <View>
                <Text>微信</Text>
            </View>
        )
    }

    renderLeftBarButtonItem(){
        return (
            <TouchableOpacity>
                <Image source={{uri:'nav_item_game_click_icon'}} style={{width:20,height:20}}/>
            </TouchableOpacity>
        )
    }
    renderRightBarButtonItem(){
        return (
            <TouchableOpacity>
                <Text>右邊</Text>
            </TouchableOpacity>
        )
    }
}

• 效果

自定義導(dǎo)航條.png