1、新建NavigationBar.js

/**
 * NavigationBar
 * @flow
 */
import React, {Component} from 'react';
import PropTypes from 'prop-types';
import {
    StyleSheet,
    Platform,
    StatusBar,
    Text,
    View
} from 'react-native'
const NAV_BAR_HEIGHT_IOS = 44;
const NAV_BAR_HEIGHT_ANDROID = 50;
const STATUS_BAR_HEIGHT = 20;
const StatusBarShape = {
    barStyle: PropTypes.oneOf(['light-content','default']),
    hidden: PropTypes.bool,
    backgroundColor: PropTypes.string,
};
export default class NavigationBar extends Component {
    static propTypes = {
        style: View.propTypes.style,
        title: PropTypes.string,
        titleView: PropTypes.element,
        hide: PropTypes.bool,
        statusBar: PropTypes.shape(StatusBarShape),
        rightButton: PropTypes.element,
        leftButton: PropTypes.element,
    };
    static defaultProps = {
        statusBar: {
            barStyle: 'light-content',
            hidden: false,
        },
    };

    constructor(props) {
        super(props);
        this.state = {
            title: '',
            hide: false
        };
    }

    render() {
        let status = <View style={styles.statusBar}>
            <StatusBar {...this.props.statusBar} />
        </View>
        let titleView = this.props.titleView ? this.props.titleView:
            <Text style={styles.title}>{this.props.title}</Text>;
        let content = <View style={styles.navBar}>
            {this.props.leftButton}
            <View style={styles.titleViewContainer}>
                {titleView}
            </View>
            {this.props.rightButton}
        </View>;
        return (
            <View style={styles.container}>
                {status}
                {content}
            </View>
        )
    }
}
const styles = StyleSheet.create({
    container: {
        backgroundColor: '#20a1a1',
    },
    navBar: {
        flexDirection: 'row',
        alignItems: 'center',
        justifyContent: 'space-between',
        height: Platform.OS === 'ios' ? NAV_BAR_HEIGHT_IOS : NAV_BAR_HEIGHT_ANDROID,
    },
    titleViewContainer: {
        backgroundColor:'#20a1a1',
        justifyContent:'center',
        alignItems:'center',
        position:'absolute',
        left:40,
        right:40,
        top:10,
        bottom:0,
    },
    title: {
        fontSize: 18,
        color: '#FFFFFF',
    },
    navBarButton: {
        alignItems: 'center',
    },
    statusBar: {
        height: Platform.OS === 'ios' ? STATUS_BAR_HEIGHT : 0,
    },
})

刚开始在引入PropTypes的时候是从react中引入的，但是总是报错evaluating _react2.propTypes.oneOf,最后把它换成import PropTypes from 'prop-types';就好了
2、使用

• 导入
  import NavigationBar from "./js/common/NavigationBar";
• 使用

      <NavigationBar
          title={'主页'}
          statusBar={{
          backgroundColor: '#20a1a1'
            }
          }
      />

• 运行截图：

  
  
  自定义NavigationBar

3、添加导航栏左侧按钮

• 首先导入

import {
    TouchableOpacity,
} from 'react-native';

然后在使用

       <NavigationBar
                 title={'主页'}
                 statusBar={{
                     backgroundColor: '#20a1a1'
                 }
                 }
                 leftButton={
                     <TouchableOpacity>
                         <Image style={{width:22,height:22,marginTop:10,marginLeft:10}} source={require('./res/image/lf.png')}/>
                     </TouchableOpacity>
                 }
          />

运行截图：

image.png