优化头部组件

wechat_demo/app/Details.js

import React, { Component } from 'react';
import {View,Text,Image,StyleSheet,ScrollView,Platform,Dimensions} from 'react-native'; 
import {View,Text,Image,StyleSheet,ScrollView,Platform,Dimensions, TouchableOpacity} from 'react-native'; 
import { WebView } from 'react-native-webview';
import Header from './Header'
var {height,width} =  Dimensions.get('window');
    render() {
        return (
            <View style={{flex:1}}>
                <Header title='返回' leftEvent={()=>this.back(this)}></Header>
                <Header>
                    <TouchableOpacity style={{flex: 1, justifyContent: 'center', alignContent: 'center',  flexDirection: 'column', textAlign: 'center',}} onPress={()=>this.back(this)}>
                        <Image style={styles.tabImg} source={require('../static/img/back.png')} />
                    </TouchableOpacity>
                </Header>
                {/* <ScrollView style={{height:height-50}}> */}
                    {/* <View style={{alignItems:'center',height:height-50}}>
                        <View><Text style={{fontSize:15,marginTop:40}}>3号免手洗</Text></View>
}
const styles = StyleSheet.create({
 
    tabImg:{
        width:30,
        height:30
    }
})

wechat_demo/app/Header.js

 * @lint-ignore-every XPLATJSCOPYRIGHT1
 */
import React, {Component} from 'react';
import React, {Component, Children} from 'react';
import {Modal, StyleSheet, Text, View,Image,TouchableOpacity,TouchableHighlight} from 'react-native';
import ModalContent from './ModalContent'
        this.setState({ modalVisible: visible });
      }
    
      renderTitle(){
        let {children,title} =  this.props
        if(title){
          title = <Text style={styles.headerLeftText} numberOfLines={1}>{title}</Text>
        }
        return title?title:children
      }
  render() {
    return (
      <View style={{height:50}}>
        <View style={styles.headerContainer}>
          <View style={styles.headerLeft}>
            <Text style={styles.headerLeftText} onPress={()=>{this.props.leftEvent()}}>{this.props.title}</Text>
            {this.renderTitle()}
            {/* <Text style={styles.headerLeftText} onPress={()=>{this.props.leftEvent()}}>{this.props.title}</Text> */}
          </View>
          <View style={styles.headerRight}>
            <TouchableOpacity style={styles.clickButton,styles.leftButton} onPress={() => {

wechat_demo/app/Home.js

        console.log(barItems)
        return (
            <View>
                <Header title="我的二维码" leftEvent={() => { }}></Header>
                <Header title="我的二维码"></Header>
                <SegmentedBar
                    justifyItem={justifyItem}
                    indicatorType={indicatorType}