做移動開發的人員都知道，導航器是一個App中必不可少的組成部分，它可以實現頁面之間的切換。 本文所要講述的是如何去封裝一個頭部導航器組件，開發人員只需要傳入參數，就可以實現自己想要的導航器樣式。
具體代碼：
/** * NavigatorBar公共組件 * Create by zhoujinlong on 2017/1/5 */import React, {Component} from 'react';import { View, Text, StyleSheet, PixelRatio, Dimensions, Platform, TouchableOpacity,} from 'react-native';/** * _backgroundColor //背景顏色 * title1 //標題1【必須】 * title2 //標題2【必須】 * titleTextSize //標題字體大小 * firstTitleFunc //標題1按鈕回調方法 * secondTitleFunc //標題2按鈕回調方法 * titleColor //標題文字顏色 * leftIcon //左邊圖標 * leftIconColor //左邊圖標顏色 * leftText //左邊文字，如果圖像和圖標一起傳，則默認使用圖標 * leftTextColor //左邊文字顏色 * leftTextSize //左邊字體大小 * leftFunc //左邊欄的方法 * rightIcon //右邊圖標 傳具體的圖標 * rightIconColor //右邊圖標顏色 * rightText //右邊文字 * rightTextColor //右邊文字顏色 * rightTextSize //右邊字體大小 * rightFunc //右邊欄方法 * * 示例: * 導航欄左邊文字返回：<NavigatorBar title="工作" leftText="返回" leftFunc={()=>{alert(2);}} /> * 導航欄左邊圖片：<NavigatorBar title="工作" leftIcon={""} leftFunc={()=>{alert(2);}} /> * */export default class NavigatorBar extends Component { constructor(PRops) { super(props); this.state = { checkedTitleStyle : [], uncheckedTitleStyle : [], firstTitleStyle:[], secondTitleStyle:[], params : props, } //選中的標題按鈕樣式處理 this.state.checkedTitleStyle.push(styles.checkedTitleStyle); props.titleColor ? this.state.checkedTitleStyle.push({color: props.titleColor}) : this.state.checkedTitleStyle.push({color: '#000000'}); props.titleTextSize ? this.state.checkedTitleStyle.push({fontSize:props.titleTextSize}):this.state.checkedTitleStyle.push({fontSize:18}); //未選中的標題按鈕樣式處理 this.state.uncheckedTitleStyle.push(styles.uncheckedTitleStyle); props.titleColor ? this.state.uncheckedTitleStyle.push({color: props.titleColor}) : this.state.uncheckedTitleStyle.push({color: '#000000'}); props.titleTextSize ? this.state.uncheckedTitleStyle.push({fontSize: props.titleTextSize}) : this.state.uncheckedTitleStyle.push({fontSize:18}); //初始化標題按鈕的樣式 this.state.firstTitleStyle = this.state.checkedTitleStyle; this.state.secondTitleStyle = this.state.uncheckedTitleStyle; } //標題1按鈕事件 firstTitlePress(){ if(this.state.params.secondTitleFunc===undefined){ alert("標題按鈕1沒有回調函數！"); }else{ this.state.params.firstTitleFunc(); } this.setState({ firstTitleStyle:this.state.checkedTitleStyle, secondTitleStyle:this.state.uncheckedTitleStyle, }); } //標題2按鈕事件2 secondTitlePress(){ if(this.state.params.secondTitleFunc===undefined){ alert("標題按鈕2沒有回調函數！"); }else{ this.state.params.secondTitleFunc(); } this.setState({ firstTitleStyle:this.state.uncheckedTitleStyle, secondTitleStyle:this.state.checkedTitleStyle, }); } render() { let {_backgroundColor,title1,title2,titleTextSize, titleColor, leftIcon, leftIconColor, leftText, leftTextSize, leftTextColor, leftFunc, rightIcon, rightIconColor, rightText, rightTextSize, rightTextColor, rightFunc} = this.state.params; let titleFalg = title1 || title2; let _titleFalg = title1 && title2; let backgroundStyle = []; //背景處理 backgroundStyle.push(styles.container); _backgroundColor?backgroundStyle.push({backgroundColor:_backgroundColor}):backgroundStyle.push({backgroundColor:"#CC1B23"}); //左邊欄處理 let leftFalg = leftIcon || leftText; if (leftFalg) { if (!leftFunc) { throw new Error("請傳左邊欄的回調方法"); } } let leftTextStyleArray = []; leftTextStyleArray.push(styles.leftTextStyle); leftTextColor ? leftTextStyleArray.push({color: leftTextColor}) : leftTextStyleArray.push({color: "#FFFFFF"}); leftTextSize ? leftTextStyleArray.push({fontSize: leftTextSize}) : leftTextStyleArray.push({fontSize:14}); //左邊圖標處理 let leftIconStyleArray = []; leftIconStyleArray.push(styles.leftIconStyle); leftIconColor ? leftIconStyleArray.push({color:leftIconColor}):leftIconStyleArray.push({color:"#FFFFFF"}); //右邊欄處理 let rightFalg = rightIcon || rightText; if (rightFalg) { if (!rightFunc) { throw new Error("請傳右邊欄的回調方法"); } } let rightTextStyleArray = []; rightTextStyleArray.push(styles.rightTextStyle); rightTextColor ? rightTextStyleArray.push({color: rightTextColor}) : rightTextStyleArray.push({color: "#FFFFFF"}); rightTextSize ? rightTextStyleArray.push({fontSize: rightTextSize}) : rightTextStyleArray.push({fontSize: 14}); //右邊圖標處理 let rightIconStyleArray = []; rightIconStyleArray.push(styles.rightIconStyle); rightIconColor ? rightIconStyleArray.push({color:rightIconColor}):rightIconStyleArray.push({color:"#FFFFFF"}); return ( <View style={backgroundStyle}> {//中間標題 titleFalg? _titleFalg? <View style={styles.titleStyle}> <TouchableOpacity activeOpacity={1} onPress={this.firstTitlePress.bind(this)}> <Text style={this.state.firstTitleStyle}> {title1} </Text> </TouchableOpacity> <TouchableOpacity activeOpacity={1} onPress={this.secondTitlePress.bind(this)}> <Text style={this.state.secondTitleStyle}> {title2} </Text> </TouchableOpacity> </View> : <View > { title1? <TouchableOpacity activeOpacity={1} onPress={this.firstTitlePress.bind(this)}> <Text style={[this.state.firstTitleStyle,{backgroundColor:_backgroundColor}]}>{title1}</Text> </TouchableOpacity> : <TouchableOpacity activeOpacity={1} onPress={this.firstTitlePress.bind(this)}> <Text style={this.state.secondTitleStyle}>{title2}</Text> </TouchableOpacity> } </View> :null } { //左邊欄 leftFalg ? <TouchableOpacity onPress={leftFunc} style={[styles.leftStyle]}> { leftText? leftIcon? <View style={styles.leftTouchStyle}> <Text style={leftIconStyleArray}>{leftIcon}</Text> <Text style={leftTextStyleArray}>{leftText}</Text> </View> : <View style={styles.leftTouchStyle}> <Text style={leftTextStyleArray}>{leftText}</Text> </View> : <View style={styles.leftTouchStyle}> <Text style={{fontFamily:'iconfont',color:"white",marginLeft:0, }}>{leftIcon}</Text> </View> } </TouchableOpacity> : null } {//右邊欄 rightFalg ? <TouchableOpacity onPress={rightFunc} style={styles.rightStyle}> { rightText? rightIcon? <View style={styles.rightTouchStyle}> <Text style={rightIconStyleArray}>{rightIcon}</Text> <Text style={rightTextStyleArray}>{rightText}</Text> </View> : <View style={styles.rightTouchStyle}> <Text style={rightTextStyleArray}>{rightText}</Text> </View> : <View style={styles.rightTouchStyle}> <Text style={{fontFamily:'iconfont',color:"white" }}>{rightIcon}</Text> </View> } </TouchableOpacity> :null } </View> ); }}const styles = StyleSheet.create({ container: { flexDirection: 'row', width: Dimensions.get('window').width, height: Platform.OS === 'ios' ? 64 : 44, justifyContent: 'center', alignItems: 'center', paddingTop: Platform.OS === 'ios' ? 20 : 0, }, titleStyle:{ flexDirection:'row', borderWidth:1, borderColor:"#FFFFFF", borderRadius:3, }, checkedTitleStyle:{ color:"blue", backgroundColor:"white", }, uncheckedTitleStyle:{ color:"blue", backgroundColor:"#CC1B23", borderRadius:3, }, leftStyle: { height: 44, position: 'absolute',//絕對布局 top: Platform.OS === 'ios' ? 20 : 0, left: 10, alignItems: 'center', }, leftTextStyle: { justifyContent: 'center', alignItems: 'flex-start', marginLeft: 0, }, leftIconStyle: { fontFamily:'iconfont', }, leftTouchStyle: { alignItems: 'center', height: 44, justifyContent: 'center', }, rightStyle: { height: 44, position: 'absolute',//絕對布局 top: Platform.OS === 'ios' ? 20 : 0, right:10, alignItems: 'center', }, rightTextStyle: { justifyContent: 'center', alignItems: 'flex-start', paddingRight:0, }, rightTouchStyle:{ alignItems: 'center', height: 44, justifyContent: 'center', }, rightIconStyle: { fontFamily:'iconfont', },});新聞熱點
疑難解答
