前言
在剛開(kāi)始學(xué)習(xí)React Native的時(shí)候，版本還是0.20，問(wèn)題一大堆，Navigation這個(gè)問(wèn)題更是很多，首先，是NavigationBar的問(wèn)題，NavigationIOS有NavigationBar，Navigation卻需要自定義一個(gè)，最后，我想了想，還是自定義一個(gè)view，豈不更好，現(xiàn)在新公司不用RN，我正好有點(diǎn)時(shí)間，就把自定義的NavigationBar分享給大家。好了少?gòu)U話，上代碼；
示例代碼
// 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的類(lèi)型 var onlyLeftIcon = false; // 是否只是圖片 if (this.props.leftItemTitle && this.props.leftImageSource) { onlyLeftIcon = true; } else if (this.props.leftImageSource) { onlyLeftIcon = true; } // 左側(cè)圖片title都沒(méi)有的情況下 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的類(lèi)型 var onlyRightIcon = false; // 是否只是圖片 if (this.props.rightItemTitle && this.props.rightImageSource) { onlyRightIcon = true; } else if (this.props.rightImageSource) { onlyRightIcon = true; } // 右側(cè)圖片title都沒(méi)有的情況下 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 ( <View style={styles.nav_barView}> <View style={[styles.nav_bar, { backgroundColor: this.props.barBGColor, height: showStatusbar ? NAV_BAR_HEIGHT + STATUS_BAR_HEIGHT : NAV_BAR_HEIGHT, opacity: this.props.barOpacity }, showStatusbar ? { paddingTop: STATUS_BAR_HEIGHT } : {}, this.props.barStyle]}> <View style={styles.nav_ItemView}> { // 左側(cè)item !noneLeft ? <TouchableOpacity style={styles.nav_leftItem} onPress={this.props.leftItemFunc}> { // 左側(cè)是圖片還是文字 onlyLeftIcon ? <Image style={styles.nav_leftImage} source={this.props.leftImageSource}/> : <Text style={[styles.nav_leftTitle,{color: this.props.leftTextColor}]}> {this.props.leftItemTitle} </Text> } </TouchableOpacity> : null } </View> { hasTitleView ? <TouchableOpacity style={styles.nav_titleView} onPress={this.props.titleViewFunc}> {this.props.titleView} </TouchableOpacity> : <View style={styles.nav_titleView}> <Text style={[styles.nav_title,{color:this.props.titleTextColor}]}> {this.props.title} </Text> </View> } <View style={styles.nav_ItemView}> { // 右側(cè)item !noneRight ? <TouchableOpacity style={styles.nav_rightItem} onPress={this.props.rightItemFunc}> { // 右側(cè)是圖片還是文字 onlyRightIcon ? <Image style={styles.nav_rightImage} source={this.props.rightImageSource}/> : <Text style={[styles.nav_rightTitle,{color: this.props.rightTextColor}]}> {this.props.rightItemTitle} </Text> } </TouchableOpacity> : null } </View> </View> <View style={{height:this.props.barBorderBottomWidth,backgroundColor:this.props.barBorderBottomColor}}></View> </View> ); } } 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 ( <View style={styles.container}> <NavigationBar title='這個(gè)是標(biāo)題' leftImageSource={require('./nav_back.png')} rightItemTitle='按鈕' rightTextColor='#3393F2' leftItemFunc={this._leftItemAction.bind(this)} rightItemFunc={this._rightItemAction.bind(this)}/> <ScrollView style={styles.container} automaticallyAdjustContentInsets={false} keyboardShouldPersistTaps={true} keyboardDismissMode='on-drag' > <Text style={styles.welcome}> Welcome to React Native! </Text> <Text style={styles.instructions}> To get started, edit index.ios.js </Text> <Text style={styles.instructions}> Press Cmd+R to reload,{'/n'} Cmd+D or shake for dev menu </Text> </ScrollView> </View> ); } } 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事件
效果如圖：
ps：之前想上傳到npm服務(wù)器，但是自己沒(méi)搞成功，就這了吧..
總結(jié)
以上就是這篇文章的全部?jī)?nèi)容了，希望本文的內(nèi)容對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，如果有疑問(wèn)大家可以留言交流，謝謝大家對(duì)武林網(wǎng)的支持。
新聞熱點(diǎn)
疑難解答
圖片精選
