react native实现自定义导航栏-蒲公英云

react native实现自定义导航栏

const ImageHeader = props => (
    <View style={
   {position: "relative", height: 80}}>
        {/* <Image
            style={
   {position: "absolute", zIndex: -1, width: "100%", height: 80, resizeMode: "cover"}}
            source={require('../../image/bac_nav_top.png')}
        /> */}
        <View {...props} style={
   { flexDirection: 'row',position:"absolute",top:"50%",marginTop:-20,}}>
            {/* <Image style={
   { width: 24, height: 26 }} source={require('../image/kefu_top.png')} /> */}
            <Image style={
   { width: 35, height: 35, marginLeft: 25 }} source={require('../../image/kefu.png')} />
            <Text style={
   { fontSize: 20, fontWeight: '900', color: '#ebd598', marginLeft: 15 , marginTop: 5}}>文本</Text>
            <TouchableWithoutFeedback {...props} onPress={() => navigation.navigate("Me")}>
                <Icon style={
   { padding: 5, marginRight: 5, marginLeft: 38 }} name="user-circle" size={35} />
            </TouchableWithoutFeedback>
        </View>
    </View>
);
navigation.setOptions({
            title: '顶部导航栏',
            headerStyle: {
                height:80,
                borderBottomWidth: 0,
                //背景颜色必须为透明，不然无法透出底部图片
                backgroundColor: "transparent",
                //安卓中不添加此属性会导致背景图无法铺满
                elevation: 0,
                //标题居中
                alignSelf: "center",
                headerTransparent:true,
            },
            header:props=>{
                return <ImageHeader />;
            }
        });