React Native学习之自定义NavigationBar

来源：互联网发布：淘宝买家好评语大全50 编辑：程序博客网时间：2024/06/14 22:51

之前学习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 = 20const NAV_BAR_HEIGHT = 44export 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服务器，但是自己没搞成功，就这了吧..

1 0