React Native学习教程之自定义NavigationBar详解

前言

在刚开始学习React Native的时候，版本还是0.20，问题一大堆，Navigation这个问题更是很多，首先，是NavigationBar的问题，NavigationIOS有NavigationBar，Navigation却需要自定义一个，最后，我想了想，还是自定义一个view，岂不更好，现在新公司不用RN，我正好有点时间，就把自定义的NavigationBar分享给大家。好了少废话，上代码；

示例代码

// NavigationBar 导航条的自定义封装
// create by 小广
'use strict';
import React, { Component,PropTypes } from 'react';
import {
 Image,
 Text,
 View,
 Platform,
 TouchableOpacity,
} from 'react-native'; 

import styles from './NavigationBarStyle' 

// 导航条和状态栏的高度
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(节点)
 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,  // 是否显示状态栏的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;
 } 

 // 左侧图片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;
 } 

 // 右侧图片title都没有的情况下
 var noneRight = false;
 if (!(this.props.rightItemTitle.length > 0) && !(this.props.rightImageSource)) {
  noneRight = true;
 } 

 // 判断是否显示20状态栏高度
 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}>
   { // 左侧item
    !noneLeft
    ? <TouchableOpacity
     style={styles.nav_leftItem}
     onPress={this.props.leftItemFunc}>
     { // 左侧是图片还是文字
     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}>
   { // 右侧item
    !noneRight
    ? <TouchableOpacity
     style={styles.nav_rightItem}
     onPress={this.props.rightItemFunc}>
     { // 右侧是图片还是文字
     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 导航条的样式
// 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('左侧按钮点击了');
 } 

 _rightItemAction() {
 console.log('右侧按钮点击了');
 } 

 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(节点)
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,  // 是否显示状态栏的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事件 

效果如图：

ps：之前想上传到npm服务器，但是自己没搞成功，就这了吧..

总结

以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作具有一定的参考学习价值，如果有疑问大家可以留言交流，谢谢大家对我们的支持。