headerTitle React Native - React Navigation V6

Limbaje de Programare JavaScript / Node
,
1

Salutare,

Am o mica problema la Header, in React-Navigation. Nu de mult, Facebook a actualizat modulul la versiunea a 6-a, totusi mi-a dat putin peste cap proiectul, mai exact la Header.
headerTitle-ul la Stack Screen este afisat in partea stanga a ecranului pe Android, inainte il aveam centrat cu headerTitleAlign: 'center' in options, asta in versiunea a 5-a.
Din ce am citit si inteles din documentatia noua, se recomanda sa utilizezi libraria react-native-elements, altfel nu mai ai cum sa ai un headerTitle centrat. Am citit si documentatia de acolo si am ramas cu cateva nelamuriri:

  1. Daca vreau sa fac un titlu centrat, trebuie sa creez un custom header ca sa centrez titlul?
  2. Daca e un da, nu exista o varianta hardcoded ca sa centrez titlul din header-ul default pe care mi-l ofera stack navigator-ul?

Am facut un mic research, poate a postat careva pe Youtube sau pe StackOverFlow, dar n-am gasit pentru Android, cei mai multi fac development pentru iOS cu React-Native, by default headerTitle-ul acolo este centrat.

Multumesc!

1 Like
2

Hello,
Eu asa rezolv problema asta [(varianta simplificata de mine o gasesti mai jos) mai multe referinte si alte exemple gasesti aici: https://reactnavigation.org/docs/headers/ ] :

Importa View si StyleSheet

Adauga atributul options={{ headerTitle: ExempluHeader }} la Stack.Screen si defineste functia ExempluHeader mai jos pentru a-ti schimba titlul:

 const ExempluHeader = (props) => {
    return (
      <View style={styles.container}>
               <Text style={styles.titlul}>Titlul Tau</Text>
      </View>
    )
 
Si last step styling-ul:
const styles = StyleSheet.create({
	container: {
		flex: 1,
        textAlign: 'center',
               	},
})

Sa ai o zi usuoara!

1 Like