前言
RN開發(fā)頁面時花鹅，基本上每一個頁面我們都需要有導(dǎo)航欄，但是ReactNative又不像iOS那樣，只要控制器包裹一個導(dǎo)航控制器盔然，后面的頁面就有了默認(rèn)的導(dǎo)航欄樣式，RN中的導(dǎo)航欄需要自己實現(xiàn)。當(dāng)幾個頁面還好崇众，我們復(fù)制粘貼也還行，但是當(dāng)整個項目工程幾十個頁面時麻顶，每次創(chuàng)建導(dǎo)航欄我們都去復(fù)制粘貼這個也未免太low了。這時我們自定義一個高度可擴展的導(dǎo)航欄就勢在必行了。此導(dǎo)航欄組件也是作者在之前開源的個人RN項目OneM中抽離出來的獨立的組件。如果想查看OneM項目請點擊
預(yù)覽效果
navBar
導(dǎo)航欄組件源碼地址
https://github.com/guangqiang-liu/react-native-navigator-component-demo
組件支持哪些自定義配置
- 支持自定義導(dǎo)航欄的樣式蚕键，任意修改背景顏色寄猩，高度等
- 導(dǎo)航欄左按鈕支持自定義icon圖標(biāo)，支持任意修改圖標(biāo)顏色和尺寸，支持自定義點擊事件
- 導(dǎo)航欄左按鈕支持自定義文本兽赁，支持任意修改文本顏色和字號惊科，支持自定義點擊事件
- 導(dǎo)航欄右按鈕支持自定義icon圖標(biāo)蜡娶，支持任意修改圖標(biāo)顏色和尺寸混卵，支持自定義點擊事件
- 導(dǎo)航欄右按鈕支持自定義文本，支持任意修改文本顏色和字號窖张，支持自定義點擊事件
- 導(dǎo)航欄標(biāo)題支持正標(biāo)題和副標(biāo)題顯示等等
全部的可配置選項
const navBarConfig = {
navigationBarProps: PropTypes.Object,
onLeftPress: PropTypes.fun,
onRightPress: PropTypes.fun,
hiddenNav: PropTypes.bool,
navBarStyle: PropTypes.Object,
navContentStyle: PropTypes.Object,
hiddenLeftItem: PropTypes.bool,
leftIcon: PropTypes.Object,
leftTitle: PropTypes.string,
leftTitleStyle: PropTypes.Object,
leftItemStyle: PropTypes.Object,
titleStyle: PropTypes.Object,
title: PropTypes.string,
subTitleStyle: PropTypes.Object,
subTitle: PropTypes.string,
hiddenRightItem: PropTypes.bool,
rightIcon: PropTypes.Object,
rightTitle: PropTypes.string,
rightTitleStyle: PropTypes.Object,
rightItemStyle: PropTypes.Object
}
如何使用
- 使用自定義導(dǎo)航欄的頁面都統(tǒng)一繼承自
BaseComponent基類組件 - 重寫
navigationBarProps函數(shù)幕随，配置導(dǎo)航欄內(nèi)容 - 重寫左右按鈕的點擊事件
onLeftPress() {}，onRightPress() {} - 重寫render函數(shù)碎赢，注意是帶下劃線的render函數(shù):
_render() {}
示例Demo代碼
import React, { Component } from 'react'
import {BaseComponent} from './baseComponent/baseComponent'
import {
Platform,
StyleSheet,
Text,
View
} from 'react-native';
const instructions = Platform.select({
ios: 'Press Cmd+R to reload,\n' +
'Cmd+D or shake for dev menu',
android: 'Double tap R on your keyboard to reload,\n' +
'Shake or press menu button for dev menu',
});
export default class App extends BaseComponent {
navigationBarProps() {
return {
title: 'APP',
subTitle: 'subTitle',
rightIcon: {
name: 'rocket',
size: 20,
color: '#333'
}
}
}
onLeftPress() {
alert('點擊了左邊的按鈕')
}
onRightPress() {
alert('點擊了右邊的按鈕')
}
_render() {
return (
<View style={styles.container}>
<Text style={styles.welcome}>
Welcome to React Native!
</Text>
<Text style={styles.instructions}>
To get started, edit App.js
</Text>
<Text style={styles.instructions}>
{instructions}
</Text>
</View>
)
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#F5FCFF',
},
welcome: {
fontSize: 20,
textAlign: 'center',
margin: 10,
},
instructions: {
textAlign: 'center',
color: '#333333',
marginBottom: 5,
},
})
注意
項目中使用到了IconFont技術(shù)，如果想了解如何使用IconFont及自定義自己的font庫，請查看作者的IconFont詳細接入指南:http://www.reibang.com/p/9f6db8e38852
總結(jié)
當(dāng)我們封裝了一套高度可定制的導(dǎo)航欄組件后油挥，我們會發(fā)現(xiàn)原來開發(fā)一個頁面是如此之快深寥，這也大大的提高了代碼的重用率，同時也便于后期統(tǒng)一的修改導(dǎo)航欄樣式贤牛，簡直是一舉多得惋鹅。好了，如果同學(xué)們感覺文章對你有幫助請給個
star給個關(guān)注謝謝殉簸。
福利時間
- 作者React Native開源項目OneM地址(按照企業(yè)開發(fā)標(biāo)準(zhǔn)搭建框架設(shè)計開發(fā))：https://github.com/guangqiang-liu/OneM (歡迎小伙伴們 star)
- 作者簡書主頁：包含50多篇RN開發(fā)相關(guān)的技術(shù)文章http://www.reibang.com/u/023338566ca5 (歡迎小伙伴們：多多關(guān)注闰集，多多點贊)
- 作者React Native QQ技術(shù)交流群：620792950 歡迎小伙伴進群交流學(xué)習(xí)
- 友情提示：在開發(fā)中有遇到RN相關(guān)的技術(shù)問題，歡迎小伙伴加入交流群（620792950）般卑，在群里提問武鲁、互相交流學(xué)習(xí)。交流群也定期更新最新的RN學(xué)習(xí)資料給大家蝠检，謝謝支持沐鼠！
