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. ,
           : PropTypes.string,
           View: 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={
          :\'\',
         hidden:false
       }
     }
     render(){

       let status =<View style = {[styles.statusBar,this.props.statusBar]}><StatusBar/></View>   //状态拦
       let  View = this.props. View? this.props. View: <Text style={styles. }>{this.props. }</Text>
       let content = <View style={styles.navBar}>
         {this.props.leftButton}
         <View style={[styles. ViewContainer]}>
           { View}
         </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\',
   },
   ViewContainer:{
    justifyContent:\'center\',
    alignItems:\'center\',
    position:\'absolute\',
    left:40,
    right:40,
    top:0,
    bottom:0,
  },
   :{
    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
               =\'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
               =\'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,
  }
})