J'utilise createMaterialTopTabNavigator de react-navigation et j'essaie de personnaliser la barre d'onglets en ajoutant des composants par-dessus.
Comme vous pouvez le voir dans son guide ici:
https: // reactnavigation .org / docs / fr / material-top-tab-navigator.html # docsNav
il existe une option appelée tabBarComponent qui peut être passée pour créer la vôtre barre d'onglets. Cependant, il remplace complètement la barre d'onglets, ce qui n'est pas ce que je veux.
Je voudrais ajouter un composant personnalisé en haut de la barre d'onglets, puis avoir les onglets par défaut avec leurs étiquettes en dessous.
Quelqu'un peut-il me montrer un exemple de la façon d'ajouter un composant à la barre d'onglets s'il vous plaît?
Par exemple, le code ci-dessous remplace les onglets par Mon composant personnalisé texte mais comment puis-je avoir les deux? (composants et onglets personnalisés)
const myNavigation = createMaterialTopTabNavigator({
firstTab: FirstTabScreen,
secondTab: SecondTabScreen,
thirdTab: ThirdTabScreen,
},
{
tabBarComponent: props => (
<View><Text>My Custom Component</Text></View>
)
});
3 Réponses :
Il n'est pas si difficile de créer un composant de barre d'onglets personnalisée, voici un exemple imité d'une barre d'onglets personnalisée que j'ai créée pour un projet sur lequel je travaille.
Mais en fait, il n'y a pas tant à faire, votre composant de barre d'onglets reçoit un accessoire de navigation qui contient les différentes routes que vous avez configurées dans createMaterialTopTabNavigator . Il vous suffit donc de parcourir ces itinéraires et d'afficher un élément de barre d'onglets pour chacun d'eux.
Vous pouvez ajouter votre propre composant personnalisé à la barre d'onglets supérieure existante comme ceci:
import { createMaterialTopTabNavigator, MaterialTopTabBar } from "react-navigation";
tabBarComponent: props => <SafeAreaView>
<MyCustomHeader title='test' />
<MaterialTopTabBar {...props} />
</SafeAreaView>
Une approche très simple sera d'utiliser Fragment de react. Cela résout le problème.
return (
<Fragment>
<MyCustomHeader/>
<MaterialTopTabBar/>
</Fragment>
)
Et le retour de votre composant pourrait ressembler à ceci
import React, {Fragment} from 'react';
Dans ce cas, vous devrez créer un composant de barre d'onglets personnalisé. Mais c'est en fait beaucoup plus facile qu'il n'y paraît, donc pas de soucis
@dentemm c'est mon problème! J'ai essayé de créer une barre d'onglets personnalisée. Et je peux l'affecter à tabBarComponent. mais il supprime les onglets d'origine. Voulez-vous me montrer un exemple s'il vous plaît? J'ai eu du mal avec ça ces derniers jours, mais pas de chance
Je vais montrer un exemple de barre d'onglets que j'ai créée!