在 react native 中添加抽屉菜单和底部标签栏的事件处理程序

Posted 2023-02-16

【中文标题】在 react native 中添加抽屉菜单和底部标签栏的事件处理程序

【英文标题】：Add event handler for drawer menu and bottom tab bar in react native

【发布时间】：2019-11-20 03:47:44

【问题描述】：

我使用了 react-native-tarbar-bottom 和 react-navigation Drawer，但是当我单击左侧菜单上的抽屉项时需要选择选项卡。

为此，我想使用 Stack 或 Stack.AppTabs.Screen.props 但如何？

import  AppRegistry  from 'react-native';
import  StackNavigator, DrawerNavigator  from 'react-navigation';

import React from 'react';

import App  from './src/app';
import AppTabs from './src/components/appTabs/appTabs';


import Drawer from './src/drawer';

console.disableYellowBox = true; 

const eventHandler = (event) => 
  Stack.AppTabs.screen.props.navigation.onGetTabHandler()(event);
;

const Stack = 
  App:  screen: App ,
  AppTabs:  screen: AppTabs ,
;

const DrawerRoutes = 
  StartingScreenStack: 
    screen: StackNavigator(Stack,  initialRouteName: 'App' )
  
;
const RootNavigator =
  StackNavigator(
      Drawer: 
        name: 'Drawer',
        screen: DrawerNavigator(
          DrawerRoutes, 
            drawerWidth: 240,
            contentComponent: props => <Drawer ...props eventHandler=eventHandler />
          
        ),
      ,

以上代码是我尝试过的，但我无法为 AppTabs 设置道具， 任何人请帮助我。 谢谢

【参考方案1】：

最后我发现了我的错误并像这样修复它，

var tabHandler = (that, index) => 
var currentTab;

const setHandler = (that, func) => 
  tabHandler = func;
  currentTab = that;


const drawerSelectHandler = (drawer, index) => 
  drawer.props.navigation.navigate("DrawerClose");
  tabHandler(currentTab, index);
;

const Stack = 
  App:  screen: App ,
  AppTabs:  screen: props => <AppTabs ...props setTabHandler=setHandler /> 
;