navigationBar 自定义组件的实现

navigationBar 的功能就是 上面的导航  由三部分的组成：

1， leftButton ；   2，中间文本部分 ；   3，rightButton

主要代码 

import React,{Component} from 'react';
import {View, Text,StyleSheet,Image,Platform,StatusBar} from 'react-native';
import PropTypes from 'prop-types';
const NAV_BAR_HEIGHT_ANDROID = 50; // 安卓的navbar高度
const NAV_BAR_HEIGHT_IOS =  55; //  ios的navbar高度
const STATUS_BAR_HEIGHT = 20; // 状态栏高度
const StatusBarShape = {   //这个是 StatusBar 样式的接口形状
       backgroundColor: PropTypes.string,
       barStyle:PropTypes.oneOf(['default','light-content','dark-content']), // ！！！oneOf跟的是数组
       hidden:PropTypes.bool
}
//  barStyle 设备支持三色选一  风格
export default  class NavigationBar extends Component{
  static propTypes={
          style:PropTypes.object,
          title: PropTypes.string,
          titleView: PropTypes.element,
          hide:PropTypes.bool,
          leftButton:PropTypes.element,
          rightButton:PropTypes.element,
         statusBar:PropTypes.shape(StatusBarShape) // 定义接口
  }
  static defaultProps={ // 默认的props
    statusBar:{
      barStyle:'dark-content',
      hidden:false
    }
  }

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

       let status =<View style = {[styles.statusBar,this.props.statusBar]}><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,this.props.style]}>{status}{content}</View>)
     }
}

const styles =  StyleSheet.create({
  container:{

  },
  navBar:{
    justifyContent:'space-between',
    alignItems:'center',
    height:Platform.OS === 'ios' ?NAV_BAR_HEIGHT_IOS:NAV_BAR_HEIGHT_ANDROID,
    flexDirection:'row',
   },
  titleViewContainer:{
    justifyContent:'center',
    alignItems:'center',
    position:'absolute',
    left:40,
    right:40,
    top:0,
    bottom:0,
  },
  title:{
    fontSize:20,
    color:'white',
  },
  statusBar:{
     height: Platform.OS === 'ios' ?STATUS_BAR_HEIGHT:0
  }

})

在其他组件里引用

import React,{Component} from 'react';
import {View, Text,StyleSheet,TouchableOpacity,Image} from 'react-native';
import NavigationBar from "./NavigationBar"
import Boy from './Boy';

export default class Girl extends Component{
  constructor(props){
    super(props);
    this.state={

    }
  }
  renderEle(url){
    return (<TouchableOpacity
        onPress={()=>{this.props.navigator.pop()}}
    >
      <Image
          style={{width:22,height:22,margin:5}}
          source={url}
      />
    </TouchableOpacity>)
  }
  render(){
    return(
        <View style={styles.container}>
          <NavigationBar
              title='boy'
              style={{backgroundColor:'#ff6eb4'}}
              leftButton={this.renderEle(require('./res/images/ic_arrow_back_white_36pt.png'))}
              rightButton={this.renderEle(require('./res/images/ic_star.png'))}
          />
          <Text style={styles.text}>
            I'm a girl
          </Text>
          <Text style={styles.text}>
           我收到了男孩送的 {this.props.word}
          </Text>
          <Text style={styles.text}
           onPress={()=>{
             this.props.onCallBack('巧克力')
             this.props.navigator.pop()
           }}
          >
           回赠巧克力
          </Text>
        </View>
    )
  }
}
/* 自定义组件NavigationBar
 *
 * renderEle(url){
    return (<TouchableOpacity
        onPress={()=>{this.props.navigator.pop()}}
    >
      <Image
          style={{width:22,height:22,margin:5}}
          source={url}
      />
    </TouchableOpacity>)
  }
 *  TouchableOpacity 是一个可以包含touch事件的包裹层 ；
 * <NavigationBar
              title='boy'
              style={{backgroundColor:'#ff6eb4'}}
              leftButton={this.renderEle(require('./res/images/ic_arrow_back_white_36pt.png'))}
              rightButton={this.renderEle(require('./res/images/ic_star.png'))}
          />
 *    把各个参数值入进去 就可以了

 * */
const styles =  StyleSheet.create({
  container:{

    backgroundColor:'white',  // 要设置颜色不然会出把上个页面的背景色露出来
    justifyContent:'center',
  },
  text:{
    fontSize:20,
  }
})