React Native學(xué)習(xí)教程之自定義NavigationBar詳解

更新時間：2017年10月18日 09:47:38 作者：開發(fā)仔XG

這篇文章主要給大家介紹了關(guān)于React Native學(xué)習(xí)教程之自定義NavigationBar的相關(guān)資料，文中通過是示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧。

前言

在剛開始學(xué)習(xí)React Native的時候，版本還是0.20，問題一大堆，Navigation這個問題更是很多，首先，是NavigationBar的問題，NavigationIOS有NavigationBar，Navigation卻需要自定義一個，最后，我想了想，還是自定義一個view，豈不更好，現(xiàn)在新公司不用RN，我正好有點時間，就把自定義的NavigationBar分享給大家。好了少廢話，上代碼；

示例代碼

// 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標題 
 titleTextColor: PropTypes.string, // nav標題顏色 
 titleView: PropTypes.node,  // nav自定義標題View(節(jié)點) 
 titleViewFunc: PropTypes.func, // nav的titleView點擊事件 
 barBGColor: PropTypes.string, // Bar的背景顏色 
 barOpacity: PropTypes.number, // Bar的透明度 
 barStyle: PropTypes.number, // Bar的擴展屬性,nav樣式(暫未使用) 
 barBorderBottomColor: PropTypes.string, // Bar底部線的顏色 
 barBorderBottomWidth: PropTypes.number, // Bar底部線的寬度 
 statusbarShow: PropTypes.bool,  // 是否顯示狀態(tài)欄的20高度(默認true) 
 leftItemTitle: PropTypes.string, // 左按鈕title 
 leftImageSource: PropTypes.node, // 左Item圖片(source) 
 leftTextColor: PropTypes.string, // 左按鈕標題顏色 
 leftItemFunc: PropTypes.func,  // 左Item事件 
 rightItemTitle: PropTypes.string, // 右按鈕title 
 rightImageSource: PropTypes.node, // 右Item圖片(source) 
 rightTextColor: PropTypes.string, // 右按鈕標題顏色 
 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 ( 
  <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', 
 }, 
 
 // 標題純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è)按鈕點擊了'); 
 } 
 
 _rightItemAction() { 
 console.log('右側(cè)按鈕點擊了'); 
 } 
 
 render() { 
 return ( 
  <View style={styles.container}> 
  <NavigationBar 
   title='這個是標題' 
   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標題 
titleTextColor: PropTypes.string, // nav標題顏色 
titleView: PropTypes.node,  // nav自定義標題View(節(jié)點) 
titleViewFunc: PropTypes.func, // nav的titleView點擊事件 
barBGColor: PropTypes.string, // Bar的背景顏色 
barOpacity: PropTypes.number, // Bar的透明度 
barStyle: PropTypes.number, // Bar的擴展屬性,nav樣式(暫未使用) 
barBorderBottomColor: PropTypes.string, // Bar底部線的顏色 
barBorderBottomWidth: PropTypes.number, // Bar底部線的寬度 
statusbarShow: PropTypes.bool,  // 是否顯示狀態(tài)欄的20高度(默認true) 
leftItemTitle: PropTypes.string, // 左按鈕title 
leftImageSource: PropTypes.node, // 左Item圖片(source) 
leftTextColor: PropTypes.string, // 左按鈕標題顏色 
leftItemFunc: PropTypes.func,  // 左Item事件 
rightItemTitle: PropTypes.string, // 右按鈕title 
rightImageSource: PropTypes.node, // 右Item圖片(source) 
rightTextColor: PropTypes.string, // 右按鈕標題顏色 
rightItemFunc: PropTypes.func,  // 右Item事件

效果如圖：