react native 自定義head title組件

import Entypo from 'react-native-vector-icons/Entypo';
import SimpleLineIcons from 'react-native-vector-icons/SimpleLineIcons';
import React, { PureComponent } from 'react';

import {
    AppRegistry,
    StyleSheet,
    Text,
    View,
    Image,
    TouchableOpacity,
    Platform,
    Switch,
    DeviceEventEmitter
} from 'react-native';

export default class Title extends PureComponent {
    constructor() {
        super();


        this.state = {
            leftVisible: 'hidden',
            rigitVisible: 'hidden',

        };
    }

render = () => {


     console.log(this)

     let leftView = this.props.leftVisibility == 'hidden' ?
         <View style={{ padding: 8, flex: 1, }} /> : <TouchableOpacity style={{ flex: 1, }}
             onPress={() => {
                this.props.leftCallBack? this.props.leftCallBack():null
             }}
         >
             <Entypo name='chevron-thin-left' size={21} color='#fff'  style={{marginLeft:10}}/>
         </TouchableOpacity>

     let rightView = this.props.rightVisibility == 'hidden' ?
         <View style={{ padding: 8, flex: 1, }} /> : <TouchableOpacity style={{ flex: 1, alignItems:'flex-end'}}
             onPress={() => {
                 this.props.rightCallBack?this.props.rightCallBack():null
             }}
         >
             <SimpleLineIcons name='share-alt' size={21} color='#fff' style={{marginRight:10}}/>
         </TouchableOpacity>



     return (

         <View style={styles.footerContainer} >
             {leftView}
             <Text style={{ fontSize: 24, color: 'white' }}>{this.props.name ? this.props.name : 'Delphy'}</Text>
             {rightView}
         </View>


     );
 }




}


const styles = StyleSheet.create({
 footerContainer: {

     flexDirection: 'row',
     justifyContent: 'center',
     alignItems: 'center',
     backgroundColor: '#45506e',
     height: 50
 },

});



使用：


back = () => {
     this.props.navigation.dispatch(NavigationActions.back());
 }


 share = () => {
     toastShort('share')
 }


render() {
     return (
         <View>
             <Title leftVisibility={'visible'} rightVisibility={'visible'} name={'詳情'}
                 leftCallBack={
                     this.back.bind(this)
                 }
                 rightCallBack={
                     this.share.bind(this)
                 }
             />
             <View>
）
}