React Native学习之自定义Navigator

来源：互联网发布：活水清泉网络诗歌456 编辑：程序博客网时间：2024/06/06 07:18

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;

自定义封装的比较粗糙, 给你提供一个思路.

作者：枫叶_云
链接：http://www.jianshu.com/p/5249d8c1bed8
來源：简书
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。

阅读全文

0 0