前言
在剛開(kāi)始學(xué)習(xí)react native的時(shí)候，版本還是0.20，問(wèn)題一大堆，navigation這個(gè)問(wèn)題更是很多，首先，是navigationbar的問(wèn)題，navigationios有navigationbar，navigation卻需要自定義一個(gè)，最后，我想了想，還是自定義一個(gè)view，豈不更好，現(xiàn)在新公司不用rn，我正好有點(diǎn)時(shí)間，就把自定義的navigationbar分享給大家。好了少?gòu)U話，上代碼；
示例代碼
|
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
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
|
// navigationbar 導(dǎo)航條的自定義封裝 // create by 小廣 'use strict'; import react, { component,proptypes } from 'react'; import { image, text, view, platform, touchableopacity, } from 'react-native'; import styles from './navigationbarstyle' // 導(dǎo)航條和狀態(tài)欄的高度 const status_bar_height = 20 const nav_bar_height = 44 export default class navigationbar extends component { static defaultprops = { title: 'title', titletextcolor: '#383838', titleviewfunc () {}, barbgcolor: '#f8f8f8', baropacity: 1, barstyle: 0, barborderbottomcolor: '#d4d4d4', barborderbottomwidth: 0.8, statusbarshow: true, leftitemtitle: '', lefttextcolor: '#383838', leftitemfunc () {}, rightitemtitle: '', righttextcolor: '#383838', rightitemfunc () {}, //leftimagesource: require('./nav_back.png'), }; static proptypes = { title: proptypes.string, // nav標(biāo)題 titletextcolor: proptypes.string, // nav標(biāo)題顏色 titleview: proptypes.node, // nav自定義標(biāo)題view(節(jié)點(diǎn)) titleviewfunc: proptypes.func, // nav的titleview點(diǎn)擊事件 barbgcolor: proptypes.string, // bar的背景顏色 baropacity: proptypes.number, // bar的透明度 barstyle: proptypes.number, // bar的擴(kuò)展屬性,nav樣式(暫未使用) barborderbottomcolor: proptypes.string, // bar底部線的顏色 barborderbottomwidth: proptypes.number, // bar底部線的寬度 statusbarshow: proptypes.bool, // 是否顯示狀態(tài)欄的20高度(默認(rèn)true) leftitemtitle: proptypes.string, // 左按鈕title leftimagesource: proptypes.node, // 左item圖片(source) lefttextcolor: proptypes.string, // 左按鈕標(biāo)題顏色 leftitemfunc: proptypes.func, // 左item事件 rightitemtitle: proptypes.string, // 右按鈕title rightimagesource: proptypes.node, // 右item圖片(source) righttextcolor: proptypes.string, // 右按鈕標(biāo)題顏色 rightitemfunc: proptypes.func, // 右item事件 }; render() { // 判斷左item的類型 var onlylefticon = false; // 是否只是圖片 if (this.props.leftitemtitle && this.props.leftimagesource) { onlylefticon = true; } else if (this.props.leftimagesource) { onlylefticon = true; } // 左側(cè)圖片title都沒(méi)有的情況下 var noneleft = false; if (!(this.props.leftitemtitle.length > 0) && !(this.props.leftimagesource)) { noneleft = true; } // 判斷是否自定義titleview var hastitleview = false; if (this.props.title && this.props.titleview) { hastitleview = true; } else if (this.props.titleview) { hastitleview = true; } // 判斷右item的類型 var onlyrighticon = false; // 是否只是圖片 if (this.props.rightitemtitle && this.props.rightimagesource) { onlyrighticon = true; } else if (this.props.rightimagesource) { onlyrighticon = true; } // 右側(cè)圖片title都沒(méi)有的情況下 var noneright = false; if (!(this.props.rightitemtitle.length > 0) && !(this.props.rightimagesource)) { noneright = true; } // 判斷是否顯示20狀態(tài)欄高度 let showstatusbar = this.props.statusbarshow; if (platform.os === 'android') { // 安卓不顯示 showstatusbar = false; } return ( <view style={styles.nav_barview}> <view style={[styles.nav_bar, { backgroundcolor: this.props.barbgcolor, height: showstatusbar ? nav_bar_height + status_bar_height : nav_bar_height, opacity: this.props.baropacity }, showstatusbar ? { paddingtop: status_bar_height } : {}, this.props.barstyle]}> <view style={styles.nav_itemview}> { // 左側(cè)item !noneleft ? <touchableopacity style={styles.nav_leftitem} onpress={this.props.leftitemfunc}> { // 左側(cè)是圖片還是文字 onlylefticon ? <image style={styles.nav_leftimage} source={this.props.leftimagesource}/> : <text style={[styles.nav_lefttitle,{color: this.props.lefttextcolor}]}> {this.props.leftitemtitle} </text> } </touchableopacity> : null } </view> { hastitleview ? <touchableopacity style={styles.nav_titleview} onpress={this.props.titleviewfunc}> {this.props.titleview} </touchableopacity> : <view style={styles.nav_titleview}> <text style={[styles.nav_title,{color:this.props.titletextcolor}]}> {this.props.title} </text> </view> } <view style={styles.nav_itemview}> { // 右側(cè)item !noneright ? <touchableopacity style={styles.nav_rightitem} onpress={this.props.rightitemfunc}> { // 右側(cè)是圖片還是文字 onlyrighticon ? <image style={styles.nav_rightimage} source={this.props.rightimagesource}/> : <text style={[styles.nav_righttitle,{color: this.props.righttextcolor}]}> {this.props.rightitemtitle} </text> } </touchableopacity> : null } </view> </view> <view style={{height:this.props.barborderbottomwidth,backgroundcolor:this.props.barborderbottomcolor}}></view> </view> ); } } |
css樣式：
|
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
|
// navigationbarstyle 導(dǎo)航條的樣式 // create by 小廣 'use strict'; import { stylesheet, } from 'react-native'; export default stylesheet.create({ // navbar nav_barview:{ justifycontent: 'center', }, nav_bar: { //flex:1, flex: 1, flexdirection:'row', justifycontent: 'center', }, // 標(biāo)題純title nav_title: { fontsize:17, }, // titleview nav_titleview: { flex: 1, alignitems: 'center', justifycontent: 'center', }, nav_itemview:{ width:80, justifycontent: 'center', }, // 左item nav_leftitem: { marginleft:8, flex:1, justifycontent: 'center', alignself: 'flex-start', //backgroundcolor:'#f00', }, // 左item為title nav_lefttitle: { marginright:5, marginleft:5, fontsize: 14, }, // 左圖片 nav_leftimage: { margin:10, resizemode:'contain', }, // 右item nav_rightitem: { marginright:8, flex:1, justifycontent: 'center', alignself: 'flex-end', //backgroundcolor:'#3393f2', }, // 右item為title nav_righttitle: { marginright:5, marginleft:5, fontsize: 14, }, // 右圖片 nav_rightimage:{ margin:10, resizemode:'contain', //backgroundcolor:'#f00', }, //resizemode:'contain', }); |
用法：引入之后
import navigationbar from '你的存放路徑/navigationbar.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
|
class xgrndemo extends component { _leftitemaction() { console.log('左側(cè)按鈕點(diǎn)擊了'); } _rightitemaction() { console.log('右側(cè)按鈕點(diǎn)擊了'); } render() { return ( <view style={styles.container}> <navigationbar title='這個(gè)是標(biāo)題' leftimagesource={require('./nav_back.png')} rightitemtitle='按鈕' righttextcolor='#3393f2' leftitemfunc={this._leftitemaction.bind(this)} rightitemfunc={this._rightitemaction.bind(this)}/> <scrollview style={styles.container} automaticallyadjustcontentinsets={false} keyboardshouldpersisttaps={true} keyboarddismissmode='on-drag' > <text style={styles.welcome}> welcome to react native! </text> <text style={styles.instructions}> to get started, edit index.ios.js </text> <text style={styles.instructions}> press cmd+r to reload,{'\n'} cmd+d or shake for dev menu </text> </scrollview> </view> ); } } const styles = stylesheet.create({ container: { flex: 1, backgroundcolor: '#f5fcff', }, welcome: { fontsize: 20, textalign: 'center', margin: 10, }, instructions: { textalign: 'center', color: '#333333', marginbottom: 5, }, }); |
其中可以自定義的屬性
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
|
title: proptypes.string, // nav標(biāo)題 titletextcolor: proptypes.string, // nav標(biāo)題顏色 titleview: proptypes.node, // nav自定義標(biāo)題view(節(jié)點(diǎn)) titleviewfunc: proptypes.func, // nav的titleview點(diǎn)擊事件 barbgcolor: proptypes.string, // bar的背景顏色 baropacity: proptypes.number, // bar的透明度 barstyle: proptypes.number, // bar的擴(kuò)展屬性,nav樣式(暫未使用) barborderbottomcolor: proptypes.string, // bar底部線的顏色 barborderbottomwidth: proptypes.number, // bar底部線的寬度 statusbarshow: proptypes.bool, // 是否顯示狀態(tài)欄的20高度(默認(rèn)true) leftitemtitle: proptypes.string, // 左按鈕title leftimagesource: proptypes.node, // 左item圖片(source) lefttextcolor: proptypes.string, // 左按鈕標(biāo)題顏色 leftitemfunc: proptypes.func, // 左item事件 rightitemtitle: proptypes.string, // 右按鈕title rightimagesource: proptypes.node, // 右item圖片(source) righttextcolor: proptypes.string, // 右按鈕標(biāo)題顏色 rightitemfunc: proptypes.func, // 右item事件 |
效果如圖：
ps：之前想上傳到npm服務(wù)器，但是自己沒(méi)搞成功，就這了吧..
總結(jié)
以上就是這篇文章的全部?jī)?nèi)容了，希望本文的內(nèi)容對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，如果有疑問(wèn)大家可以留言交流，謝謝大家對(duì)服務(wù)器之家的支持。
原文鏈接：http://blog.csdn.net/syg90178aw/article/details/52126883
