如何在反应导航抽屉中添加按钮(在现有按钮之间) [英] How to add a button inside react-navigation Drawer (BETWEEN existing buttons)

问题描述

在DrawerItemList中添加一个不链接到按钮上方或下方的路径的额外抽屉按钮就像做一样简单:

To add an extra Drawer button that doesn't link to a route above or below a button in DrawerItemList is as easy as doing:

  <Drawer.Navigator initialRouteName="Home" drawerContent={props => {
    return (
      <DrawerContentScrollView {...props}>
        <DrawerItemList {...props} />
        <DrawerItem label="Logout" onPress={() => props.navigation.navigate("Login")} />
      </DrawerContentScrollView>
    )
  }}>
    <Drawer.Screen name="Home" component={Home}/>
    <Drawer.Screen name="About" component={About} />
  </Drawer.Navigator>

但现在我需要添加一个自定义按钮(如注销按钮，使用自定义 onPress 不会只是转到路线，而是导航到主页和在Home和About按钮之间调用了几个函数.

But now I need to add a custom button (like the Logout one, with a custom onPress that doesn't just go to a route, but navigates to Home and calls a couple of functions) between the Home and About buttons.

所以我关于抽屉上按钮的结束按钮结果应该是:

So my end button result with regards to the buttons on the Drawer should be:

--首页

-- 自定义

-- 关于

-- 退出

我需要以某种方式拆分 DrawerItemList 但不确定如何拆分.

I'd need to somehow break up DrawerItemList but not sure how.

有什么想法可以实现这一目标吗?

Any ideas how I can achieve this?

小吃可以在这里

(使用 react-navigation > v5)

(Using react-navigation > v5)

推荐答案

先看DrawerItemList 不允许除屏幕外的任何其他内容.

To begin with , the code of DrawerItemList doesnt allow anything else except for screens to be there.

但这只是您必须传递的另一个组件.

But its just another component that you have to pass.

因此，处理此问题的最简单方法是使用源代码创建您自己的 DrawerItemList 版本，并可以选择传递自定义 onPress 函数.

So the easiest way to handle this would be to create your own version of DrawerItemList using the source code and have the option to pass a custom onPress function.

自定义组件看起来像这样，我已经评论了我修改的地方.

The custom component would look like this, I've commented the places that i modified.

import * as React from 'react';
import {
  CommonActions,
  DrawerActions,
  DrawerNavigationState,
  ParamListBase,
  useLinkBuilder,
} from '@react-navigation/native';

import { DrawerItem } from '@react-navigation/drawer';

export default function CustomDrawerList({
  state,
  navigation,
  descriptors,
  activeTintColor,
  inactiveTintColor,
  activeBackgroundColor,
  inactiveBackgroundColor,
  itemStyle,
  labelStyle,
}: Props) {
  const buildLink = useLinkBuilder();

  return state.routes.map((route, i) => {
    const focused = i === state.index;
    //Access the custom onPress that is passed as an option
    const { title, drawerLabel, drawerIcon, onPress } = descriptors[route.key].options;
  
    return (
      <DrawerItem
        key={route.key}
        label={
          drawerLabel !== undefined
            ? drawerLabel
            : title !== undefined
            ? title
            : route.name
        }
        icon={drawerIcon}
        focused={focused}
        activeTintColor={activeTintColor}
        inactiveTintColor={inactiveTintColor}
        activeBackgroundColor={activeBackgroundColor}
        inactiveBackgroundColor={inactiveBackgroundColor}
        labelStyle={labelStyle}
        style={itemStyle}
        to={buildLink(route.name, route.params)}
        onPress={
          //if onPress is available use that or call the usual navigation dispatch
          // i also passed the navigation so that we can use it in our custom calls
          onPress
            ? () => onPress(navigation)
            : () => {
                navigation.dispatch({
                  ...(focused
                    ? DrawerActions.closeDrawer()
                    : CommonActions.navigate(route.name)),
                  target: state.key,
                });
              }
        }
      />
    );
  });
}

抽屉看起来像这样，我们将 onPress 作为选项传递

And the drawer would look like this, we pass the onPress as an option

 <Drawer.Navigator
    initialRouteName="Home"
    drawerContent={(props) => {
      return (
        <DrawerContentScrollView {...props}>
          <CustomDrawerList {...props} />
        </DrawerContentScrollView>
      );
    }}>
    <Drawer.Screen name="Home" component={PlaceholderPage} />
    <Drawer.Screen name="Custom" component={PlaceholderPage} options={{
      onPress:()=>alert(123)
    }}/>
    <Drawer.Screen name="About" component={PlaceholderPage} />
  </Drawer.Navigator>

你可以在这里查看小吃https://snack.expo.io/@guruparan/custom-button-抽屉内

这篇关于如何在反应导航抽屉中添加按钮(在现有按钮之间)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！