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服务器，但是自己没搞成功，就这了吧..