reactjs - 如何在 react 抽屉导航中添加按钮(在现有按钮之间)

Question

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

  <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 和 调用几个函数)之间 Home和 About纽扣。
所以我关于抽屉上按钮的结束按钮结果应该是:
- 家
- 风俗
- 关于
- 登出
我需要以某种方式分手 DrawerItemList但不确定如何。
我有什么想法可以实现这一目标吗？
零食可以找 here
(使用 react-navigation > v5)

Answer 1

首先，代码DrawerItemList不允许除屏幕之外的任何其他东西在那里。
但它只是您必须通过的另一个组件。
因此，处理此问题的最简单方法是使用源代码创建您自己的 DrawerItemList 版本，并可以选择传递自定义 onPress 函数。
自定义组件看起来像这样，我已经评论了我修改的地方。

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 作为选项传递

 <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-in-drawer