web-dev-qa-db-fra.com

Comment ajouter un composant personnalisé à la barre d'onglets createMaterialTopTabNavigator

J'utilise createMaterialTopTabNavigator de react-navigation et en essayant de personnaliser la barre d'onglets en ajoutant des composants dessus.

Comme vous pouvez le voir dans son guide ici:

https://reactnavigation.org/docs/en/material-top-tab-navigator.html#docsNav

il existe une option appelée tabBarComponent qui peut être passée pour créer votre propre barre d'onglets. Cependant, il remplace complètement la barre d'onglets 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 My Custom Component 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>
  )
});
javascriptreact-nativereact-navigation
5
HTB

Une approche très simple consistera à utiliser Fragment from react. Cela résout le problème.

import React, {Fragment} from 'react';

Et le retour de votre composant pourrait ressembler à ceci

return (
        <Fragment>
            <MyCustomHeader/>
            <MaterialTopTabBar/>
        </Fragment>

    )
1
Maccabeus

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>
1
planetClaire