-
Notifications
You must be signed in to change notification settings - Fork 0
/
NavigatorBar.js
92 lines (88 loc) · 2.47 KB
/
NavigatorBar.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
/**
* Created by Administrator on 2017/3/15 0015.
*/
import React, { Component } from 'react';
import {
Text,
View,
StyleSheet,
Image,
StatusBar,
Platform
} from 'react-native';
const Nav_Bar_Height_Android=50;
const Nav_Bar_Height_Ios=44;
const Status_Bar_Height=20;
const StatusBarShape={
backgroundColor:React.PropTypes.string,
// barStyle:React.PropTypes.oneOf('default','light-content','dark-content'),
hidden:React.PropTypes.bool
}
export default class NavigatorBar extends Component{
static propTypes={
style:View.propTypes.style,
title:React.PropTypes.string,
titleView:React.PropTypes.element,
hide:React.PropTypes.bool,
leftButton:React.PropTypes.element,
rightButton:React.PropTypes.element,
statusBar:React.PropTypes.shape(StatusBarShape),
backgroundColor:React.PropTypes.string
}
static defaultProps={
statusBar:{
barStyle:'light-content',
hidden:false
},
backgroundColor:'red'
}
// 构造
constructor(props) {
super(props);
// 初始状态
this.state = {
title:'',
hide:false
};
}
render(){
let status=<View style={styles.statusBar}>
<StatusBar {...this.props.statusBar} />
</View>
let titleView=this.props.titleView? this.props.titleView: <Text style={styles.title}>{this.props.title}</Text>
let content=<View style={[styles.NavBar,{backgroundColor:this.props.backgroundColor},{justifyContent:this.props.justifyContent}]}>
{this.props.leftButton}
<View style={styles.titleViewContainer}>
{titleView}
</View>
{this.props.rightButton}
</View>
return (
<View style={styles.container}>
{status}
{content}
</View>
)
}
}
const styles=StyleSheet.create({
container:{
backgroundColor:'gray',
},
NavBar:{
alignItems:'center',
height:Platform.OS==='ios'? Nav_Bar_Height_Ios:Nav_Bar_Height_Android,
flexDirection:'row'
},
titleViewContainer:{
justifyContent:'center',
alignItems:'center',
},
title:{
fontSize:20,
color:'white'
},
statusBar:{
height:Platform.OS==='ios'? Status_Bar_Height:0
}
})