Je crée une application React Native qui est censée avoir un en-tête personnalisé pour pratiquement tous les écrans, j'ai donc créé un composant Navbar que j'ai défini comme en-tête par défaut qui fonctionne bien. Bien que lorsque je navigue entre les écrans de l'application, l'en-tête ne change pas comme il est censé l'être. Avec un en-tête standard, l'ancien disparaît et le nouveau apparaît lorsque vous naviguez vers une autre route dans la pile, mais le mien se remplace automatiquement.
Je pense que le problème pourrait résulter du fait que tous les écrans ont le "même" Le composant de la barre de navigation, c'est-à-dire qu'il n'y en a pas un nouveau créé pour chaque écran, donc lorsque je navigue, il met simplement à jour les accessoires de la barre de navigation et le rend à nouveau.
Voici la configuration du navigateur
App.js
...
const stackNavigator = createStackNavigator(
{
...
}, {
initialRouteName: "Home",
defaultNavigationOptions: ({ navigation }) => ({
header: (headerProps) => {
return <Navbar navigation={navigation} {...headerProps.scene.descriptor.options} /> //Will pass navigationOptions as props
},
animationEnabled: true
}),
navigationOptions: {
animationEnabled: true,
},
headerTransitionPreset: 'fade-in-place',
transitionConfig: () => {
return {
transitionSpec: {
duration: 2000, //Easier to see the navigation animation
}
}
}
);
Le composant Navbar est un élément régulier React.Component, avec tous les autres composants de l'écran si cela fait une différence
Y a-t-il des accessoires dont je devrais m'occuper? J'ai effectué des recherches partout sur le Web, en particulier sur les documents React Navigation et la référence API, mais je n'ai trouvé aucune information.
Voici quelques exemples de son apparence avec ma barre de navigation personnalisée et de son apparence avec l'en-tête par défaut. Notez que la valeur par défaut s'estompe pendant toute la transition tandis que ma personnalisation change simplement de vue dans une instance. La seule modification que j'ai apportée a été de commenter la partie header: ...
Personnalisé https://imgur.com/PXvm7gA
Par défaut https://imgur.com/yk3jyr9
3 Réponses :
Vous pouvez spécifier n'importe quel composant pour gauche et droite dans l'en-tête de la configuration de l'écran, vous pouvez avoir quelque chose comme ceci:
createStackNavigator({
home: {
screen: (props) => (
<View style={{flex: 1}}>
</View>
),
navigationOptions: () => ({
title: `Title`,
headerRight: (
<React.Fragment>
<Button title={'First'} />
<Button title={'Second'} />
</React.Fragment>
)
})
},
});
Si j'ai bien compris, votre en-tête ne navigue pas avec l'écran? Si tel est le cas, utilisez headerMode = 'screen' Selon react-navigation 5. *
<NavigationContainer>
<Stack.Navigator initialRouteName="List" headerMode='screen'>
<Stack.Screen name="Article"
component= { Article }/>
<Stack.Screen name="List"
component= { List }/>
</Stack.Navigator>
</NavigationContainer>
mode d'en-tête défini sur écran, naviguez dans l'en-tête avec l'écran qui est commun dans Android où, comme si vous le définissiez sur float, l'en-tête ne naviguera pas mais changera son contenu, ce qui est courant dans iOS. définissez-le sur aucun si vous ne voulez pas d'en-tête.
Je suis sur react-navigation@5.1.3 et ce qui suit fonctionne pour moi (tiré de mon code):
<Stack.Navigator>
<Stack.Screen
name={"route1"}
component={Route1View}
options={{title: "route 1 title"}}
/>
<Stack.Screen
name={"route2}
component={Route2View}
options={({navigation, route}) =>({
title: "route 2 title",
header: (props) => <CustomHeader {...props} />
})}
/>
</Stack.Navigator>
Si vous commencez par route 1, l'en-tête par défaut est affiché. Lorsque vous appuyez sur la route 2, l'en-tête personnalisé disparaît. Lorsque vous quittez, la valeur par défaut s'affiche à nouveau.
Avez-vous des mises à jour à ce sujet? J'aimerais vraiment savoir aussi! Courir dans le même problème rn.
Rien, malheureusement. J'ai abandonné alors le mien a l'air vraiment mauvais sans l'animation