寫下面組件其實只是因為自己每次用到頂部導航欄都要寫一大段，為了精簡代碼量，所以自己寫了一個頂部導航欄的組件，并未上傳到GitHub，需要的同學可以直接復制下面代碼（Toorbar.js）到自己的項目中，具體方法是：

import Toorbar from './...' //就是你存放的路徑

下面有具體代碼

組件代碼：
Toorbar.js (英語不好，寫的時候不小心打錯)

import React, { Component } from 'react';
import {
    Text,
    View,
    TouchableOpacity,
    Dimensions,
    Image
} from 'react-native';
var width = Dimensions.get('window').width;
var height = Dimensions.get('window').height;
import PropTypes from 'prop-types';
export default class ToorBar extends Component {
    constructor(props){
        super(props);
    }
    render() {
        return (
            <View style={{
                width: width,
                height: this.props.height,
                flexDirection:'row',
                justifyContent:'center',
                alignItems:'center',
                backgroundColor:this.props.backgroundColor,
            }}>
                <TouchableOpacity style={{width:this.props.height,height:this.props.height}} onPress={this.props.handleMenu}>
                    <View style={{width:this.props.height,height:this.props.height,justifyContent:'center',alignItems:'center'}}>
                        <Image source={this.props.source1}></Image>
                    </View>
                </TouchableOpacity>
                <View style={{width:width-2*this.props.height,height:this.props.height,justifyContent:'center',alignItems:'center'}}>
                    <Text style={{color:this.props.color,fontSize:this.props.fontSize}}>{this.props.title}</Text>
                </View>
                <TouchableOpacity style={{width:this.props.height,height:this.props.height}} onPress={this.props.press}>
                    <View style={{width:this.props.height,height:this.props.height,justifyContent:'center',alignItems:'center'}}>
                        <Image source={this.props.source2}></Image>
                    </View>
                </TouchableOpacity>
            </View>
        );
    }
}

ToorBar.propTypes = {
    //press:PropTypes.func.isRequired,
    handleMenu : PropTypes.func.isRequired,
    source1 : PropTypes.number.isRequired,
    title : PropTypes.string.isRequired,
    press : PropTypes.func.isRequired,
    source2 : PropTypes.number.isRequired
}
ToorBar.defaultProps = {
    height:50,
    backgroundColor:'#476DC5',
    color:'white',
    fontSize:20
}

具體用法：
App.js

/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 * @flow
 */

import React, { Component } from 'react';
import {
  Platform,
  StyleSheet,
  Text,
  View,
    Dimensions
} from 'react-native';
var width = Dimensions.get('window').width;
import ToorBar from './ToorBar'; //這里先導入組建

export default class App extends Component<{}> {
  press () {
    alert("test");
  }
  render() {
    return (
      <View style={styles.container}>
        <View style={{
            position:'absolute',
            top:0,
            height:50,
            width:width
        }}>
        <ToorBar press={this.press.bind(this)} handleMenu={this.press.bind(this)} source1={require('./images/menu-white.png')} source2={require('./images/menu-white.png')} title={"TEST"}/>
        //這里是具體用法 ,press屬性是頂部菜單右邊圖標的點擊事件,handleMenu屬性是頂部導航左邊圖標的點擊事件,source1屬性是左邊圖標路徑,source2屬性是右邊圖標屬性,title屬性是導航欄標題
        </View>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  },
  welcome: {
    fontSize: 20,
    textAlign: 'center',
    margin: 10,
  },
  instructions: {
    textAlign: 'center',
    color: '#333333',
    marginBottom: 5,
  },
});

下面具體圖片：

test.png

兩側圖標（source1,source2）和中間標題（title）標題顏色（color）導航欄底色（backgroundColor）可以隨自己喜好設置

初次寫簡書，并且學React-Native沒多久，有不到之處，請多多見諒