web-dev-qa-db-ja.com

カスタムコンポーネントをcreateMaterialTopTabNavigatorタブバーに追加する方法

私はreact-navigationのcreateMaterialTopTabNavigatorを使用しており、その上にいくつかのコンポーネントを追加してタブバーをカスタマイズしようとしています。

あなたがここでそのガイドで見ることができるように：

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

tabBarComponentというオプションがあり、これを渡して独自のタブバーを作成できます。しかし、それは私が望むものではないタブバーを完全に上書きします。

タブバーの上部にカスタムコンポーネントを追加し、その下にラベルが付いたデフォルトのタブを用意します。

誰かがコンポーネントをタブバーに追加する方法の例を教えてもらえますか？

たとえば、次のコードはタブをMy Custom Componentテキストに置き換えますが、両方を使用するにはどうすればよいですか？ （カスタムコンポーネントとタブ）

const myNavigation = createMaterialTopTabNavigator({
  firstTab: FirstTabScreen,
  secondTab: SecondTabScreen,
  thirdTab: ThirdTabScreen,
},
{
  tabBarComponent: props => (
    <View><Text>My Custom Component</Text></View>
  )
});
javascriptreact-nativereact-navigation
5
HTB

非常に簡単なアプローチは、反応からフラグメントを使用することです。それは問題を解決します。

import React, {Fragment} from 'react';

そして、コンポーネントのリターンは次のようになります

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

    )
1
Maccabeus

次のように、既存の上部タブバーに独自のカスタムコンポーネントを追加できます。

import { createMaterialTopTabNavigator, MaterialTopTabBar } from "react-navigation";

tabBarComponent: props => <SafeAreaView>
  <MyCustomHeader title='test' />
  <MaterialTopTabBar {...props} />
</SafeAreaView>
1
planetClaire