ReactNative中自定义NavigationBar怎么用

这篇文章主要介绍React Native中自定义NavigationBar怎么用，文中介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们一定要看完！

创新互联公司是一家专注于网站建设、网站设计与策划设计,普兰店网站建设哪家好?创新互联公司做网站,专注于网站建设十多年,网设计领域的专业建站公司;建站业务涵盖:普兰店等地区。普兰店做网站价格咨询:13518219792

示例代码

// 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 ( 
   
   
    
   { // 左侧item 
    !noneLeft 
    ?  
     { // 左侧是图片还是文字 
     onlyLeftIcon 
     ?  
     :  
      {this.props.leftItemTitle} 
       
     } 
     
    : null 
   } 
    
   { 
   hasTitleView 
   ?  
    {this.props.titleView} 
     
   :  
     
     {this.props.title} 
     
     
   } 
    
   { // 右侧item 
    !noneRight 
    ?  
     { // 右侧是图片还是文字 
     onlyRightIcon 
     ?  
     :  
      {this.props.rightItemTitle} 
       
     } 
     
    : null 
   } 
    
   
   
   
 
 ); 
 } 
}

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 ( 
   
   
   
    
   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标题 
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事件

效果如图：

以上是“React Native中自定义NavigationBar怎么用”这篇文章的所有内容，感谢各位的阅读！希望分享的内容对大家有帮助，更多相关知识，欢迎关注创新互联行业资讯频道！