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和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

Answer 2

我是这样做的。

将此添加到抽屉项

        <DrawerItem
          {...props}
          onPress={()=> {
             navigation.navigate('home');
             //.    do other things
          }} 
          label={"Custome"}
          icon={() => <Icon name="custome" size={25} color={colors.jasmine} />}
          style={props.itemStyle}
        />

Answer 3

最简单的方法就是根本不使用DrawerItemList。

没有任何样式的简单示例（请参见Snack）：

<Drawer.Navigator
    initialRouteName="Home"
    drawerContent={(props) => {
      return (
        <DrawerContentScrollView {...props}>
          <Button title="Home"onPress={() => props.navigation.navigate("Home")} />
          <Button title="Custom" onPress={() => console.log('Custom Logic')} />
          <Button title="About" onPress={() => props.navigation.navigate("About")} />
          <Button title="Logout" onPress={() => console.log('CUSTOM LOGOUT FUNCTION')} />
        </DrawerContentScrollView>
      );
    }}>
    <Drawer.Screen name="Home" component={PlaceholderPage} />
    <Drawer.Screen name="About" component={PlaceholderPage} />
  </Drawer.Navigator>

如何在反应导航抽屉中添加按钮（现有按钮之间）

3 个答案: