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 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;