Detailed explanation of custom NavigationBar in react native learning tutorial

Time:2021-4-29

preface

At the beginning of learning react native, the version was still 0.20, and there were a lot of problems, especially navigation. First of all, there was the problem of NavigationBar. Navigationios had a NavigationBar, but navigation needed to be customized. Finally, I thought about it. Wouldn’t it be better to define a view by myself? Now the new company doesn’t use RN, so I just have a little time, Let’s share the custom NavigationBar with you. Well, less nonsense, on the code;

Sample code

//Custom encapsulation of navigation bar 
//Create by Xiaoguang 
'use strict'; 
import React, { Component,PropTypes } from 'react'; 
import { 
 Image, 
 Text, 
 View, 
 Platform, 
 TouchableOpacity, 
} from 'react-native'; 
 
import styles from './NavigationBarStyle' 
 
//Height of navigation bar and status bar 
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 title 
 Titletextcolor: proptypes. String, // NAV Title Color 
 Titleview: proptypes.node, // NAV custom title view (node) 
 Titleview func: proptypes. Func, // NAV's titleview click event 
 Barbgcolor: proptypes. String, // background color of bar 
 Baropacity: proptypes. Number, // transparency of bar 
 Barstyle: proptypes. Number, // bar's extended attribute, NAV style (not used yet) 
 Barborderbottomcolor: proptypes. String, // the color of the bottom line of the bar 
 Barborderbottomwidth: proptypes. Number, // bar bottom line width 
 Statusbarshow: proptypes.bool, // display the 20 height of the status bar (true by default) 
 Leftitemtitle: proptypes. String, // left button title 
 Leftimagesource: proptypes.node, // left item image (source) 
 Lefttextcolor: proptypes. String, // left button title color 
 Leftitemfunc: proptypes. Func, // left item event 
 Rightitemtitle: proptypes. String, // right button title 
 Rightimagesource: proptypes.node, // right item image (source) 
 Righttextcolor: proptypes. String, // right button title color 
 Rightitemfunc: proptypes. Func, // right item event 
 }; 
 
 render() { 
 //Determine the type of left item 
 var onlyLeftIcon = false; //  Is it just a picture 
 if (this.props.leftItemTitle && this.props.leftImageSource) { 
  onlyLeftIcon = true; 
 } else if (this.props.leftImageSource) { 
  onlyLeftIcon = true; 
 } 
 
 //The picture on the left has no title 
 var noneLeft = false; 
 if (!(this.props.leftItemTitle.length > 0) && !(this.props.leftImageSource)) { 
  noneLeft = true; 
 } 
 
 //Determine whether to customize titleview 
 var hasTitleView = false; 
 if (this.props.title && this.props.titleView) { 
  hasTitleView = true; 
 } else if (this.props.titleView) { 
  hasTitleView = true; 
 } 
 
 //Determine the type of right item 
 var onlyRightIcon = false; //  Is it just a picture 
 if (this.props.rightItemTitle && this.props.rightImageSource) { 
  onlyRightIcon = true; 
 } else if (this.props.rightImageSource) { 
  onlyRightIcon = true; 
 } 
 
 //If there is no title in the right picture 
 var noneRight = false; 
 if (!(this.props.rightItemTitle.length > 0) && !(this.props.rightImageSource)) { 
  noneRight = true; 
 } 
 
 //Judge whether to display 20 status bar height 
 let showStatusbar = this.props.statusbarShow; 
 if (Platform.OS === 'android') { 
  //Android does not display 
  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}> 
   {// left item 
    !noneLeft 
    ? <TouchableOpacity 
     style={styles.nav_leftItem} 
     onPress={this.props.leftItemFunc}> 
     {// picture or text on the left 
     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 on the right 
    !noneRight 
    ? <TouchableOpacity 
     style={styles.nav_rightItem} 
     onPress={this.props.rightItemFunc}> 
     {// picture or text on the right 
     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 Style:

//Navigation bar style 
//Create by Xiaoguang 
'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', 
 }, 
 
 //Pure title 
 nav_title: { 
 fontSize:17, 
 }, 
 
 // titleView 
 nav_titleView: { 
 flex: 1, 
 alignItems: 'center', 
 justifyContent: 'center', 
 }, 
 
 nav_ItemView:{ 
 width:80, 
 justifyContent: 'center', 
 }, 
 
 //Left item 
 nav_leftItem: { 
 marginLeft:8, 
 flex:1, 
 justifyContent: 'center', 
 alignSelf: 'flex-start', 
 //backgroundColor:'#f00', 
 }, 
 
 //Left item为title 
 nav_leftTitle: { 
  marginRight:5, 
  marginLeft:5, 
  fontSize: 14, 
 }, 
 
 //Left picture 
 nav_leftImage: { 
  margin:10, 
  resizeMode:'contain', 
 }, 
 
 //Right item 
 nav_rightItem: { 
  marginRight:8, 
  flex:1, 
  justifyContent: 'center', 
  alignSelf: 'flex-end', 
  //backgroundColor:'#3393F2', 
 }, 
 
 //Right item为title 
 nav_rightTitle: { 
  marginRight:5, 
  marginLeft:5, 
  fontSize: 14, 
 }, 
 
 //Right picture 
 nav_rightImage:{ 
  margin:10, 
  resizeMode:'contain', 
  //backgroundColor:'#f00', 
 }, 
 //resizeMode:'contain', 
});

Usage: after introduction

Import NavigationBar from ‘your storage path / NavigationBar. JS’

class XGRNDemo extends Component { 
 
 _leftItemAction() { 
 Console.log ('left button is clicked '); 
 } 
 
 _rightItemAction() { 
 Console.log ('right button is clicked '); 
 } 
 
 render() { 
 return ( 
  <View style={styles.container}> 
  <NavigationBar 
   Title ='This is the title ' 
   leftImageSource={require('./nav_back.png')} 
   Rightitemtitle ='button ' 
   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, 
 }, 
});

Properties that can be customized

Title: proptypes. String, // NAV title 
Titletextcolor: proptypes. String, // NAV Title Color 
Titleview: proptypes.node, // NAV custom title view (node) 
Titleview func: proptypes. Func, // NAV's titleview click event 
Barbgcolor: proptypes. String, // background color of bar 
Baropacity: proptypes. Number, // transparency of bar 
Barstyle: proptypes. Number, // bar's extended attribute, NAV style (not used yet) 
Barborderbottomcolor: proptypes. String, // the color of the bottom line of the bar 
Barborderbottomwidth: proptypes. Number, // bar bottom line width 
Statusbarshow: proptypes.bool, // display the 20 height of the status bar (true by default) 
Leftitemtitle: proptypes. String, // left button title 
Leftimagesource: proptypes.node, // left item image (source) 
Lefttextcolor: proptypes. String, // left button title color 
Leftitemfunc: proptypes. Func, // left item event 
Rightitemtitle: proptypes. String, // right button title 
Rightimagesource: proptypes.node, // right item image (source) 
Righttextcolor: proptypes. String, // right button title color 
Rightitemfunc: proptypes. Func, // right item event

The effect is as follows:

PS: I wanted to upload to NPM server before, but I didn’t succeed. That’s it

summary

The above is the whole content of this article, I hope the content of this article has a certain reference value for your study or work, if you have any questions, you can leave a message to exchange, thank you for your support for developer.