ReactNative Toolbar 组件

写下面组件其实只是因为自己每次用到顶部导航栏都要写一大段，为了精简代码量，所以自己写了一个顶部导航栏的组件，并未上传到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没多久，有不到之处，请多多见谅