React Native學習之自定義Navigator

Navigator仍是最經常使用的組件, 因此本身封裝了一個, 使用起來也比較簡單, 以下:

 首先導入組件

var MLNavigator = require('../Lib/MLNavigator');

而後使用

 <MLNavigator
     　　 leftIconName = 'nav_btn_back'
      　　title = '個人導航'
     　　 rightIconName = 'nav_btn_back'
      　　rightTitle = '右邊標題'
     　　 callBackLeftClick = {()=> this.popToHome()}
      　　callBackRightClick = {()=> this.popToHome()}
    />

定義的一些屬性

 leftIconName: '',    // 左邊圖片
 leftTitle: '',       // 左邊標題
 title: '',           // 標題
 rightIconName: '',   // 右邊圖片
 rightTitle: '',      // 右邊標題
 callBackLeftClick: null,   // 左邊回調
 callBackRightClick: null,  // 右邊回調
 leftTitleFontSize: 14,     // 左邊標題的字體大小
 titleFontSize: 16,         // 標題的字體大小
 rightTitleFontSize: 14,    // 右邊標題的字體大小
 leftTitleColor: '#666666',     // 左邊標題的字體顏色
 titleColor: 'black',         // 標題的字體顏色
 rightTitleColor: '#666666',    // 右邊標題的字體顏色

好了, 代碼以下:

import React, { Component } from 'react';
import {
    AppRegistry,
    StyleSheet,
    Text,
    View,
    Image,
    Platform,
    TouchableOpacity
} from 'react-native';

var Dimensions = require('Dimensions');
var width = Dimensions.get('window').width;
var Height = Dimensions.get('window').height;

var MLNavigator = React.createClass ({

    getDefaultProps() {
        return{
            leftIconName: '',    // 左邊圖片
            leftTitle: '',       // 左邊標題

            title: '',           // 標題

            rightIconName: '',   // 右邊圖片
            rightTitle: '',      // 右邊標題

            callBackLeftClick: null,   // 左邊回調
            callBackRightClick: null,  // 右邊回調

            leftTitleFontSize: 14,     // 左邊標題的字體大小
            titleFontSize: 16,         // 標題的字體大小
            rightTitleFontSize: 14,    // 右邊標題的字體大小

            leftTitleColor: '#666666',     // 左邊標題的字體顏色
            titleColor: 'black',         // 標題的字體顏色
            rightTitleColor: '#666666',    // 右邊標題的字體顏色

        }
    },

    render() {
        return (
            <View style={styles.NavBarStytle}>
                {/* 左邊 */}
                {this.navLeftView()}

                <Text style={{color: this.props.titleColor, fontSize: this.props.titleFontSize, fontWeight: 'bold', bottom:-10}}>{this.props.title}</Text>

                {/* 右邊 */}
                {this.navRightView()}

            </View>
        );
    },


    navLeftView() {

        if(this.props.leftIconName){
            return(
                <TouchableOpacity activeOpacity={0.5} style={styles.leftViewStytle} onPress={()=> {this.props.callBackLeftClick()}}>
                    <Image source={{uri: this.props.leftIconName}} style={styles.NavLeftImageStyle} />
                </TouchableOpacity>
            )
        }else {
            return(
                <TouchableOpacity activeOpacity={0.5} style={styles.leftViewStytle} onPress={()=> {this.props.callBackLeftClick()}}>
                    <Text style={{color: this.props.leftTitleColor, fontSize: this.props.leftTitleFontSize, bottom:-2}}>{this.props.rightTitle}</Text>
                </TouchableOpacity>
            )
        }
    },

    navRightView() {
        if(this.props.rightIconName){
            return(
                <TouchableOpacity activeOpacity={0.5} style={styles.rightViewStytle} onPress={()=> {this.props.callBackRightClick()}}>
                    <Image source={{uri: this.props.rightIconName}} style={styles.NavRightImageStyle} />
                </TouchableOpacity>
        )
        }else {
            return(
                <TouchableOpacity activeOpacity={0.5} style={styles.rightViewStytle} onPress={()=> {this.props.callBackRightClick()}}>
                    <Text style={{color: this.props.rightTitleColor, fontSize: this.props.rightTitleFontSize, bottom:-2}}>{this.props.rightTitle}</Text>
                </TouchableOpacity>
             )
        }
    },

})

const styles = StyleSheet.create({
    NavBarStytle: {
        width: width,
        height: Platform.OS == 'ios' ? 64 : 44,
        backgroundColor: '#F2F2F2',
        flexDirection: 'row',
        alignItems: 'center',
        justifyContent: 'center'
    },

    leftViewStytle: {
        position: 'absolute',
        left: 15,
        bottom: 15
    },

    NavLeftImageStyle: {
        width: Platform.OS == 'ios' ? 15 : 15,
        height: Platform.OS == 'ios' ? 15 : 15,
    },

    rightViewStytle: {
        position: 'absolute',
        right: 15,
        bottom: 15
    },

    NavRightImageStyle: {
        width: Platform.OS == 'ios' ? 15 : 15,
        height: Platform.OS == 'ios' ? 15 : 15,
    },
});

module.exports = MLNavigator;