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> ） }