Bem, o tutorial de hoje é para aplicar uma prática de reuso, aqui no caso, reuso de componente(s). Foi uma dica que recebi quando precisei criar headers personalizados para diferentes telas. Ao invés de ter criado o header de cada tela em sua navigationOptions, a dica dada me fez criar um header base, que fosse comum para todos ou para a maioria dos headers a serem criados. Com isso eu reaproveitei código e apenas adicionava o que o header de determinada tela teria a mais, além do que já tinha no header base/default.
Abaixo o código produzido para este tutorial.
import React from 'react';
import {TouchableOpacity} from 'react-native';
import IconAnt from 'react-native-vector-icons/dist/AntDesign';
function defaultHeader({navigation}) {
function backScreen() {
return navigation.goBack(null);
}
return {
headerStyle: {
backgroundColor: '#fff',
elevation: 0,
},
headerTintColor: '#841b2d',
headerTitleStyle: {
fontWeight: 'bold',
textAlign: 'center',
flex: 1,
},
headerLeft: (
<TouchableOpacity style={{marginLeft: 10}} onPress={backScreen}>
<IconAnt name="arrowleft" size={20} color={'#841b2d'} />
</TouchableOpacity>
),
};
}
export default defaultHeader;
Acima o código do meu header base/default, que será comum à todos os demais headers.
Agora será mostrado o código dos demais headers que reusam o header base/default.
Header 1
import React from 'react';
import {TouchableOpacity} from 'react-native';
import IconAnt from 'react-native-vector-icons/dist/AntDesign';
import defaultHeader from './DefaultHeader';
function Header1(props) {
function backScreen() {
return props.navigation.goBack(null);
}
return {
...defaultHeader(props),
title: 'Header 1',
headerRight: (
<TouchableOpacity onPress={backScreen}>
<IconAnt name="close" size={27} color={'#841b2d'} />
</TouchableOpacity>
),
};
}
export default Header1;
Header 2
import React from 'react';
import {TouchableOpacity, View, Text, StyleSheet} from 'react-native';
import IconAnt from 'react-native-vector-icons/dist/AntDesign';
import defaultHeader from './DefaultHeader';
function Header2(props) {
function backScreen() {
return props.navigation.goBack(null);
}
return {
...defaultHeader(props),
headerTitle: (
<View style={styles.container}>
<Text style={styles.textTitle}>{`Header 2`}</Text>
</View>
),
headerRight: (
<TouchableOpacity onPress={backScreen}>
<IconAnt name="close" size={27} color={'#841b2d'} />
</TouchableOpacity>
),
};
}
const styles = StyleSheet.create({
container: {
flex: 1,
alignItems: 'center',
flexDirection: 'row',
justifyContent: 'flex-start',
},
textTitle: {
fontWeight: 'bold',
fontSize: 18,
textAlign: 'center',
color: '#841b2d',
},
});
export default Header2;
Header 3
import React from 'react';
import {View, Image, Text, TouchableOpacity, StyleSheet} from 'react-native';
import IconAnt from 'react-native-vector-icons/dist/AntDesign';
import defaultHeader from './DefaultHeader';
function Header3(props) {
return {
...defaultHeader(props),
headerTitle: (
<View style={styles.container}>
<Image
source={{uri: 'https://i.imgur.com/BYN8BBA.png'}}
style={styles.userImage}
/>
<Text style={styles.textTitle}>{`User`}</Text>
</View>
),
headerRight: (
<>
<TouchableOpacity>
<IconAnt name="ellipsis1" size={27} color={'#841b2d'} />
</TouchableOpacity>
</>
),
};
}
const styles = StyleSheet.create({
container: {
flex: 1,
alignItems: 'center',
flexDirection: 'row',
justifyContent: 'flex-start',
},
textTitle: {
left: 5,
fontWeight: 'bold',
fontSize: 18,
textAlign: 'center',
color: '#841b2d',
},
userImage: {
width: 50,
height: 50,
borderRadius: 400 / 2,
},
});
export default Header3;
Espero que tenham pegado a ideia que quis passar. :) até a próxima.
Top comments (0)