這篇文章主要介紹React Native中自定義NavigationBar怎么用，文中介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們一定要看完！
創(chuàng)新互聯(lián)是一家集網(wǎng)站建設(shè),新華企業(yè)網(wǎng)站建設(shè),新華品牌網(wǎng)站建設(shè),網(wǎng)站定制,新華網(wǎng)站建設(shè)報(bào)價(jià),網(wǎng)絡(luò)營銷,網(wǎng)絡(luò)優(yōu)化,新華網(wǎng)站推廣為一體的創(chuàng)新建站企業(yè)，幫助傳統(tǒng)企業(yè)提升企業(yè)形象加強(qiáng)企業(yè)競爭力?？沙浞譂M足這一群體相比中小企業(yè)更為豐富、高端、多元的互聯(lián)網(wǎng)需求。同時(shí)我們時(shí)刻保持專業(yè)、時(shí)尚、前沿，時(shí)刻以成就客戶成長自我，堅(jiān)持不斷學(xué)習(xí)、思考、沉淀、凈化自己，讓我們?yōu)楦嗟钠髽I(yè)打造出實(shí)用型網(wǎng)站。示例代碼
重慶分公司
重慶分公司
// NavigationBar 導(dǎo)航條的自定義封裝
// create by 小廣
'use strict';
import React, { Component,PropTypes } from 'react';
import {
Image,
Text,
View,
Platform,
TouchableOpacity,
} from 'react-native';
import styles from './NavigationBarStyle'
// 導(dǎo)航條和狀態(tài)欄的高度
const STATUS_BAR_HEIGHT = 20
const NAV_BAR_HEIGHT = 44
export default class NavigationBar extends Component {
static defaultProps = {
title: 'title',
titleTextColor: '#383838',
titleViewFunc () {},
barBGColor: '#f8f8f8',
barOpacity: 1,
barStyle: 0,
barBorderBottomColor: '#D4D4D4',
barBorderBottomWidth: 0.8,
statusbarShow: true,
leftItemTitle: '',
leftTextColor: '#383838',
leftItemFunc () {},
rightItemTitle: '',
rightTextColor: '#383838',
rightItemFunc () {},
//leftImageSource: require('./nav_back.png'),
};
static propTypes = {
title: PropTypes.string, // nav標(biāo)題
titleTextColor: PropTypes.string, // nav標(biāo)題顏色
titleView: PropTypes.node, // nav自定義標(biāo)題View(節(jié)點(diǎn))
titleViewFunc: PropTypes.func, // nav的titleView點(diǎn)擊事件
barBGColor: PropTypes.string, // Bar的背景顏色
barOpacity: PropTypes.number, // Bar的透明度
barStyle: PropTypes.number, // Bar的擴(kuò)展屬性,nav樣式(暫未使用)
barBorderBottomColor: PropTypes.string, // Bar底部線的顏色
barBorderBottomWidth: PropTypes.number, // Bar底部線的寬度
statusbarShow: PropTypes.bool, // 是否顯示狀態(tài)欄的20高度(默認(rèn)true)
leftItemTitle: PropTypes.string, // 左按鈕title
leftImageSource: PropTypes.node, // 左Item圖片(source)
leftTextColor: PropTypes.string, // 左按鈕標(biāo)題顏色
leftItemFunc: PropTypes.func, // 左Item事件
rightItemTitle: PropTypes.string, // 右按鈕title
rightImageSource: PropTypes.node, // 右Item圖片(source)
rightTextColor: PropTypes.string, // 右按鈕標(biāo)題顏色
rightItemFunc: PropTypes.func, // 右Item事件
};
render() {
// 判斷左Item的類型
var onlyLeftIcon = false; // 是否只是圖片
if (this.props.leftItemTitle && this.props.leftImageSource) {
onlyLeftIcon = true;
} else if (this.props.leftImageSource) {
onlyLeftIcon = true;
}
// 左側(cè)圖片title都沒有的情況下
var noneLeft = false;
if (!(this.props.leftItemTitle.length > 0) && !(this.props.leftImageSource)) {
noneLeft = true;
}
// 判斷是否自定義titleView
var hasTitleView = false;
if (this.props.title && this.props.titleView) {
hasTitleView = true;
} else if (this.props.titleView) {
hasTitleView = true;
}
// 判斷右Item的類型
var onlyRightIcon = false; // 是否只是圖片
if (this.props.rightItemTitle && this.props.rightImageSource) {
onlyRightIcon = true;
} else if (this.props.rightImageSource) {
onlyRightIcon = true;
}
// 右側(cè)圖片title都沒有的情況下
var noneRight = false;
if (!(this.props.rightItemTitle.length > 0) && !(this.props.rightImageSource)) {
noneRight = true;
}
// 判斷是否顯示20狀態(tài)欄高度
let showStatusbar = this.props.statusbarShow;
if (Platform.OS === 'android') {
// 安卓不顯示
showStatusbar = false;
}
return (
{ // 左側(cè)item
!noneLeft
?
{ // 左側(cè)是圖片還是文字
onlyLeftIcon
?
:
{this.props.leftItemTitle}
}
: null
}
{
hasTitleView
?
{this.props.titleView}
:
{this.props.title}
}
{ // 右側(cè)item
!noneRight
?
{ // 右側(cè)是圖片還是文字
onlyRightIcon
?
:
{this.props.rightItemTitle}
}
: null
}
);
}
} css樣式：
// NavigationBarStyle 導(dǎo)航條的樣式
// create by 小廣
'use strict';
import {
StyleSheet,
} from 'react-native';
export default StyleSheet.create({
// navBar
nav_barView:{
justifyContent: 'center',
},
nav_bar: {
//flex:1,
flex: 1,
flexDirection:'row',
justifyContent: 'center',
},
// 標(biāo)題純title
nav_title: {
fontSize:17,
},
// titleView
nav_titleView: {
flex: 1,
alignItems: 'center',
justifyContent: 'center',
},
nav_ItemView:{
width:80,
justifyContent: 'center',
},
// 左Item
nav_leftItem: {
marginLeft:8,
flex:1,
justifyContent: 'center',
alignSelf: 'flex-start',
//backgroundColor:'#f00',
},
// 左Item為title
nav_leftTitle: {
marginRight:5,
marginLeft:5,
fontSize: 14,
},
// 左圖片
nav_leftImage: {
margin:10,
resizeMode:'contain',
},
// 右Item
nav_rightItem: {
marginRight:8,
flex:1,
justifyContent: 'center',
alignSelf: 'flex-end',
//backgroundColor:'#3393F2',
},
// 右Item為title
nav_rightTitle: {
marginRight:5,
marginLeft:5,
fontSize: 14,
},
// 右圖片
nav_rightImage:{
margin:10,
resizeMode:'contain',
//backgroundColor:'#f00',
},
//resizeMode:'contain',
});用法：引入之后
import NavigationBar from '你的存放路徑/NavigationBar.js'
class XGRNDemo extends Component {
_leftItemAction() {
console.log('左側(cè)按鈕點(diǎn)擊了');
}
_rightItemAction() {
console.log('右側(cè)按鈕點(diǎn)擊了');
}
render() {
return (
Welcome to React Native!
To get started, edit index.ios.js
Press Cmd+R to reload,{'\n'}
Cmd+D or shake for dev menu
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#F5FCFF',
},
welcome: {
fontSize: 20,
textAlign: 'center',
margin: 10,
},
instructions: {
textAlign: 'center',
color: '#333333',
marginBottom: 5,
},
}); 其中可以自定義的屬性
title: PropTypes.string, // nav標(biāo)題 titleTextColor: PropTypes.string, // nav標(biāo)題顏色 titleView: PropTypes.node, // nav自定義標(biāo)題View(節(jié)點(diǎn)) titleViewFunc: PropTypes.func, // nav的titleView點(diǎn)擊事件 barBGColor: PropTypes.string, // Bar的背景顏色 barOpacity: PropTypes.number, // Bar的透明度 barStyle: PropTypes.number, // Bar的擴(kuò)展屬性,nav樣式(暫未使用) barBorderBottomColor: PropTypes.string, // Bar底部線的顏色 barBorderBottomWidth: PropTypes.number, // Bar底部線的寬度 statusbarShow: PropTypes.bool, // 是否顯示狀態(tài)欄的20高度(默認(rèn)true) leftItemTitle: PropTypes.string, // 左按鈕title leftImageSource: PropTypes.node, // 左Item圖片(source) leftTextColor: PropTypes.string, // 左按鈕標(biāo)題顏色 leftItemFunc: PropTypes.func, // 左Item事件 rightItemTitle: PropTypes.string, // 右按鈕title rightImageSource: PropTypes.node, // 右Item圖片(source) rightTextColor: PropTypes.string, // 右按鈕標(biāo)題顏色 rightItemFunc: PropTypes.func, // 右Item事件
效果如圖：
以上是“React Native中自定義NavigationBar怎么用”這篇文章的所有內(nèi)容，感謝各位的閱讀！希望分享的內(nèi)容對大家有幫助，更多相關(guān)知識，歡迎關(guān)注創(chuàng)新互聯(lián)網(wǎng)站建設(shè)公司行業(yè)資訊頻道！
另外有需要云服務(wù)器可以了解下創(chuàng)新互聯(lián)建站www.cdcxhl.com，海內(nèi)外云服務(wù)器15元起步，三天無理由+7*72小時(shí)售后在線，公司持有idc許可證，提供“云服務(wù)器、裸金屬服務(wù)器、高防服務(wù)器、香港服務(wù)器、美國服務(wù)器、虛擬主機(jī)、免備案服務(wù)器”等云主機(jī)租用服務(wù)以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡單易用、服務(wù)可用性高、性價(jià)比高”等特點(diǎn)與優(yōu)勢，專為企業(yè)上云打造定制，能夠滿足用戶豐富、多元化的應(yīng)用場景需求。
