React Native自定义带返回按钮的标题栏组件

来源：互联网发布：淘宝卖什么好呢编辑：程序博客网时间：2024/06/05 15:33

今天说的是左中右结构的标题栏，应用中最常见的就是左边一个返回按钮，中间一个标题。发现每次传的图片都显示不出来，就不发图了。

index.js代码部分:

import React, { Component,createClass } from 'react';import {    View,    Text,    Image,    TouchableOpacity,    } from 'react-native';import StyleSheet from 'StyleSheet';export default React.createClass({    getDefaultProps(){        return {            title:"标题",            showBack:true,//是否显示左侧的返回            sideWidth:null,        }    },    backBtnFunc(){        this.props.backFunc ? this.props.backFunc.call(null) : this.props.navigator.pop();    },       render(){        return (            <View>                <View style={styles.header}>                    <TouchableOpacity                        hitSlop={{top:10,left:10,right:10,bottom:10}}                        style={[styles.width50, this.props.sideWidth]} onPress={this.props.showBack ? this.backBtnFunc : undefined}>                        {this.props.showBack?                        <Image style={styles.backImg} source={asset(require("./back_btn.png"))} />                        :null}                    </TouchableOpacity>                    <Text style={[styles.whiteColor,styles.textCenter,styles.headerText]} >{this.props.title.length>10?(this.props.title.substr(0,10)+"..."):this.props.title}</Text>                    <View style={[styles.width50, this.props.sideWidth]}>                        {this.props.children}                    </View>                </View>            </View>        )    }})const styles = StyleSheet.create({    header:{        backgroundColor:"#4a9df8",        height :45,        flexDirection:"row",        alignItems:"center"    },    width50:{        width:$w_50    },     backImg:{        width:12,        height:22,        marginLeft:15    },    headerText:{        fontSize:18,        flex:1    },    whiteColor:{        color:"#ffffff"    },    textCenter:{        textAlign:"center"    },});

使用方法:

导入组件

import Header from "../../component/Header/index";

使用组件

<Header {..._this.props} title="二维码管理" backFunc ={_this._backClick.bind(_this)} />

1 0