React Native學習教程之自定義NavigationBar詳解

2020-07-26 02:39:26

字體：大中小

來源：轉載

供稿：網友

前言

在剛開始學習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事件

效果如圖：