自己做项目中的重点知识,不是教程,如果学习的话可以拿来参考。源代码[地址][2]
[2]: https://github.com/BaiPeiHe/react-native
简介
顶部导航栏
iOS - > UINavigation
Android - > Toolbar
React Native - > 自定义
NavigationBar基本组成
- 左侧按钮 左侧区域
- 右侧按钮 右侧区域
- 标题 中间区域
- 状态栏
具体实现
/**
* Created by baihe on 2017/4/13.
*/
import React, { Component, PropTypes } from 'react';
import {
View,
Text,
Image,
StatusBar,
Platform,
StyleSheet,
} from 'react-native'
const NAV_BAR_HEIGHT_ANDROID = 50;
const NAV_BAR_HEIGHT_IOS = 44;
const STATUS_BAR_HEIGHT = 20;
const StatusBarShape={
backgroundColor:PropTypes.string,
barStyle:PropTypes.oneOf(['default', 'light-content', 'dark-content']),
hidden:PropTypes.bool,
}
export default class NavigationBar extends Component{
static propTypes={
style:View.propTypes.style,
title:PropTypes.string,
titleView:PropTypes.element,
hide:PropTypes.bool,
leftButton:PropTypes.element,
rightButton:PropTypes.element,
statusBar:PropTypes.shape(StatusBarShape),
}
// 属性的默认值
static defaultProps={
statusBar:{
barStyle:'light-content',
hide:false,
}
}
constructor(props){
super(props);
this.state={
title:'',
hide:false
}
}
render(){
let status =
let titleView = this.props.titleView?this.props.titleView : {this.props.title}
let content =
{this.props.leftButton}
{titleView}
{this.props.rightButton}
return(
{status}
{content}
)
}
}
const styles=StyleSheet.create({
container:{
backgroundColor:'gray'
},
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,
}
});