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)} />