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