反応ナビゲーションに[TabNavigator]タブのonPressはありますか？

Question

TabNavigatorで最後のタブ（「More」など）をタップしたときにDrawerNavigatorを作成しようとしています。

このタブの画面を表示せずに、componentWillMountでDrawerNavigatorを呼び出すことなく、これを実現するにはどうすればいいでしょうか。

componentWillMount() { 
    this.props.navigation.navigate("DrawerOpen") 
} 

それは私が考える適切な解決策（この方法で「詳細」画面がロードされている）ではないハックの一種で、そのためのよりよい解決策が存在しなければなりません。

Answer 1

これはまたハックのビットですが、私はそのカスタムTabBarまたはreduxを使用せずにその最も単純なハックだと思います。あなたは何ができるか

はヌル

​​

はその後、特定のインデックスの反応ナビゲーションとトグル引き出しからあなたTabNavigator、輸入TabBarsにこの画面を追加し、レンダリング画面コンポーネントを作成することです。あなたは、単純な反応-ナビゲーションからデフォルトTabBarsを引き続き使用

import { TabBarBottom, TabBarTop } from 'react-navigation'; 

const TabBar = Platform.OS === 'ios' ? TabBarBottom : TabBarTop; 

const Navigator = TabNavigator({ 
    Tab1: { screen: Tab1 }, 
    Tab2: { screen: Tab2 }, 
    Tab3: { screen: Tab3 }, 
    More: { screen: More } 
}, { 
    tabBarComponent: ({jumpToIndex, ...props, navigation}) => (
     <TabBar 
      {...props} 
      jumpToIndex={index => { 
       if (index === 3) { 
        navigation.navigate('DrawerToggle'); //Toggle drawer 
       } 
       else { 
        jumpToIndex(index) 
       } 
      }} 
     /> 
    ) 
}); 

この方法では、あなたの引き出しのアイコン/ラベルを持っており、引き出しを切り替えるためにそれを使用します。

Answer 2

のカスタムtabBarComponentを実装する必要があります。TabNavigator。これはオプションで提供する通常のコンポーネントです。

コンポーネントでは、「その他」ボタンとしてonPressを定義するだけで、引き出しが開きます。

これは簡単です。