您好,登錄后才能下訂單哦!
這篇文章主要介紹React Native中自定義NavigationBar怎么用,文中介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們一定要看完!
示例代碼
// NavigationBar 導航條的自定義封裝 // create by 小廣 'use strict'; import React, { Component,PropTypes } from 'react'; import { Image, Text, View, Platform, TouchableOpacity, } from 'react-native'; import styles from './NavigationBarStyle' // 導航條和狀態(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標題 titleTextColor: PropTypes.string, // nav標題顏色 titleView: PropTypes.node, // nav自定義標題View(節(jié)點) titleViewFunc: PropTypes.func, // nav的titleView點擊事件 barBGColor: PropTypes.string, // Bar的背景顏色 barOpacity: PropTypes.number, // Bar的透明度 barStyle: PropTypes.number, // Bar的擴展屬性,nav樣式(暫未使用) barBorderBottomColor: PropTypes.string, // Bar底部線的顏色 barBorderBottomWidth: PropTypes.number, // Bar底部線的寬度 statusbarShow: PropTypes.bool, // 是否顯示狀態(tài)欄的20高度(默認true) leftItemTitle: PropTypes.string, // 左按鈕title leftImageSource: PropTypes.node, // 左Item圖片(source) leftTextColor: PropTypes.string, // 左按鈕標題顏色 leftItemFunc: PropTypes.func, // 左Item事件 rightItemTitle: PropTypes.string, // 右按鈕title rightImageSource: PropTypes.node, // 右Item圖片(source) rightTextColor: PropTypes.string, // 右按鈕標題顏色 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都沒有的情況下 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都沒有的情況下 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樣式:
// NavigationBarStyle 導航條的樣式 // 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', }, // 標題純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'
class XGRNDemo extends Component { _leftItemAction() { console.log('左側(cè)按鈕點擊了'); } _rightItemAction() { console.log('右側(cè)按鈕點擊了'); } render() { return ( <View style={styles.container}> <NavigationBar title='這個是標題' 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, }, });
其中可以自定義的屬性
title: PropTypes.string, // nav標題 titleTextColor: PropTypes.string, // nav標題顏色 titleView: PropTypes.node, // nav自定義標題View(節(jié)點) titleViewFunc: PropTypes.func, // nav的titleView點擊事件 barBGColor: PropTypes.string, // Bar的背景顏色 barOpacity: PropTypes.number, // Bar的透明度 barStyle: PropTypes.number, // Bar的擴展屬性,nav樣式(暫未使用) barBorderBottomColor: PropTypes.string, // Bar底部線的顏色 barBorderBottomWidth: PropTypes.number, // Bar底部線的寬度 statusbarShow: PropTypes.bool, // 是否顯示狀態(tài)欄的20高度(默認true) leftItemTitle: PropTypes.string, // 左按鈕title leftImageSource: PropTypes.node, // 左Item圖片(source) leftTextColor: PropTypes.string, // 左按鈕標題顏色 leftItemFunc: PropTypes.func, // 左Item事件 rightItemTitle: PropTypes.string, // 右按鈕title rightImageSource: PropTypes.node, // 右Item圖片(source) rightTextColor: PropTypes.string, // 右按鈕標題顏色 rightItemFunc: PropTypes.func, // 右Item事件
效果如圖:
以上是“React Native中自定義NavigationBar怎么用”這篇文章的所有內(nèi)容,感謝各位的閱讀!希望分享的內(nèi)容對大家有幫助,更多相關(guān)知識,歡迎關(guān)注億速云行業(yè)資訊頻道!
免責聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進行舉報,并提供相關(guān)證據(jù),一經(jīng)查實,將立刻刪除涉嫌侵權(quán)內(nèi)容。