navigation-drawer 相关问题

TypeError：navigation.openDrawer不是一个函数（未定义）js引擎：React Native中的hermes

我在我的React Native项目中使用React Navigation，结合了Stack Navigator和Drawer Navigator，但是当我尝试在我的组件中使用navigation.openDrawer()时，我得到了以下信息...

提供给React Navigation的NativeStackScreenProps的“导航器ID”是什么？

React Navigation 文档提供了一些有关 TypeScript 类型检查的建议，其中包括以下类型检查屏幕： 输入 Props = NativeStackScreenProps React 导航文档提供了一些有关 TypeScript 类型检查的建议，其中包括以下内容用于类型检查屏幕： type Props = NativeStackScreenProps<RootStackParamList, 'Profile', 'MyStack'>; 最后一个参数是（可选）“导航器的 ID”，但不清楚它来自哪里或代表什么。 提供给NativeStackScreenProps的“导航器ID”是什么？ 这可以与 navigation.getParent 一起使用来在子导航器中引用此导航器。

反应本机中的样式抽屉菜单切换按钮

我正在尝试向切换按钮添加一些背景阴影，并稍微增加尺寸，但我无法找到针对该按钮的正确道具。 这是我的代码。 我正在尝试向切换按钮添加一些背景阴影，并稍微增加尺寸，但我无法找到针对该按钮的正确道具。 这是我的代码。 <Drawer.Navigator screenOptions={(navigation) => ({ drawerStyle:{width:280}, drawerItemStyle: { borderRadius: 0, width: '100%', marginVertical: 0, marginLeft: 0, }, drawerLabelStyle: { fontFamily: 'sans-serif', fontWeight:'100' }, drawerActiveTintColor: '#288df9', drawerInactiveTintColor: '#444' })}> ... </Drawer.Navigator> 任何有关如何设置切换按钮样式的帮助将不胜感激。 如果你检查这个Drawer的实现，你会发现这个按钮是一个硬编码在里面的图像：https://github.com/react-navigation/react-navigation/blob/b91c9b05ff96727f5fa6ef0bec51b5d7eac06600/packages/drawer/src/views/ DrawerToggleButton.tsx#L37 export default function DrawerToggleButton({ tintColor, ...rest }: Props) { const navigation = useNavigation<DrawerNavigationProp<ParamListBase>>(); return ( <PlatformPressable {...rest} accessible accessibilityRole="button" android_ripple={{ borderless: true }} onPress={() => navigation.dispatch(DrawerActions.toggleDrawer())} style={styles.touchable} hitSlop={Platform.select({ ios: undefined, default: { top: 16, right: 16, bottom: 16, left: 16 }, })} > <Image style={[styles.icon, tintColor ? { tintColor } : null]} source={require('./assets/toggle-drawer-icon.png')} fadeDuration={0} /> </PlatformPressable> ); } 我认为你可以做的就是替换node_modules中的图像并使用补丁包将其保存为本地存储库中的补丁。 另一种方法是实现自己的 Button 并使用 openDrawer/closeDrawer 方法来控制抽屉。 使用 headerTintColor 选项 <Drawer.Screen name="index" // This is the name of the page and must match the url from root options={{ drawerLabel: 'Home', title: 'overview', headerTintColor: 'white' // headerLeft: () => ( // <View><ThemedText>123</ThemedText></View> // ) }} />

当抽屉打开时，Android 上的状态栏不完全透明

我正在尝试实现完全透明的状态栏，以便活动背景绘制在状态栏上。我对此进行了研究，发现下面的代码对我有用，至少对于活动

如何将反应本机抽屉标题图标（“汉堡”）设置到右侧？

我将抽屉设置在右侧，但是屏幕标题中的汉堡包图标保持默认左侧，是否有任何属性可以通过将位置更改为右侧？我知道应该这样做......

如何让viewmodel发起后台任务

我有一个队列需要执行任务。任务有两种类型：片段工作和后台工作。但我想把所有的工作代码都放在viewmodel中统一管理。我该怎么办

有没有办法隐藏导航抽屉底部

我的导航抽屉在手机默认页脚后面可见（后退按钮、主页按钮、最近使用的应用程序按钮）。我的 我希望默认页脚隐藏导航抽屉。我不想...

在 Android 中的汉堡导航菜单图标中添加徽章计数器

我的问题与这个问题相同（不是这个问题的重复）。 这个问题的唯一答案对我来说不起作用，因为，而不是将默认的汉堡包图标更改为

根据角色不同的导航抽屉

我一直在尝试根据角色有两种不同的导航。我不确定我是否使用了正确的名称和单词，因此，这是我的意思的图像示例： （抱歉图片太大了，我是

根据 Flutter 中设置页面的变化更新 Drawer 内容

我需要刷新抽屉内容才能应用，特别是在设置页面中进行的字体大小更改。抽屉是在 MyHomePage 类中定义的。我的代码的一部分如下。我需要一个...

对于某些 Android 用户，React Native 应用程序中的抽屉菜单会冻结

我的 React Native 应用程序中的抽屉菜单遇到问题。一些使用 Android 设备的用户报告菜单卡住并且无法导航。我已经使用 @...

flutter 中页面控制器出现滚动控制器错误

当我尝试调用 _pagecontroller.jumpToPage 或 _pagecontroller.animateToPage 时，出现以下错误： 发生异常。 _AssertionError（'包：flutter/src/widgets/scroll_controller....

如何在Android中制作浮动的NavigationView

我想复制Google在其应用程序中的菜单，但我不知道是否有像NavigationView和DrawerLayout这样的组件允许制作此菜单，但这不是固定的...

Flutter DrawerHeader // 如何摆脱分隔线

我第一次设计一个抽屉，DrawerHeader 显然带有一条灰线作为分隔线，我想摆脱它，但我不知道如何摆脱。 代码在这里（为了可读性而编辑），屏幕截图

ReactNative抽屉导航自定义页脚

我有一个抽屉式导航，我试图在底部放置一个页脚，其中包含附加信息（应用程序版本和注销链接）.. 这是我的导航容器： <

如何在React-Navigation/Drawer 6中实现“返回”

我在 React-navigation/drawer 6 中实现 goBack 函数时遇到问题（“@react-navigation/drawer”：“^ 6.1.4”，准确地说）。 我在react中能够完美实现-

您可以在不使用react-native中创建自定义抽屉的情况下更改抽屉项目样式吗？

我在我的反应本机应用程序中使用抽屉导航器，我想知道您是否可以更改抽屉屏幕中存在的项目的样式而不制作自定义抽屉？比如提供定制v...

抽屉中的下拉按钮颤动

我尝试在抽屉标题中添加下拉按钮，但我遇到问题 下拉按钮 这是我的代码 导入'包：flutter/material.dart'; 导入'包：测试/屏幕/change_password_screen.dart'； 我...

没有自定义工具栏的导航抽屉

我已经用片段实现了导航抽屉，它完全工作正常。现在我想在不使用自定义工具栏的情况下实现导航抽屉（使用 AppTheme== DarkActionbar）。我不是...

React Native - 将抽屉标题隐藏在底部选项卡导航器内的堆栈中

我想通过表单的所有屏幕隐藏抽屉标题，该表单实际上是一个堆栈。我正在使用 React Native CLI。 添加患者堆栈 我想通过表单的所有屏幕隐藏抽屉标题，该表单实际上是一个堆栈。我正在使用 React Native CLI。 添加患者堆栈 <Stack.Navigator screenOptions={{headerShown: false}}> <Stack.Screen name="Step1" component={Step1} options={{headerShown: false}}/> <Stack.Screen name="Step2" component={Step2} options={{headerShown: false}}/> </Stack.Navigator> <Tab.Navigator> <Tab.Screen name="Home" component={HomeScreen} /> <Tab.Screen name="AddPatient" component={AddPatientStack} /> </Tab.Navigator> <Drawer.Navigator screenOptions={{header: () => <HeaderMenu />}} drawerContent={props => <CustomDrawerContent {...props} />}> <Drawer.Screen name="BottomTabNavigator" component={BottomTabNavigator} /> </Drawer.Navigator> 我尝试了很多方法，但没有任何效果。 您可以使用 navigation.setOptions 在选项卡导航器内的屏幕上打开和关闭 headerShown。您需要在创建选项卡导航器的组件中执行此操作；否则，导航道具将引用堆栈导航器而不是选项卡导航器： import { createMaterialBottomTabNavigator } from 'react-native-paper/react-navigation'; import { getFocusedRouteNameFromRoute, useFocusEffect, } from '@react-navigation/native'; import HomeScreen from './Home'; import AddPatientStack from './AddPatient'; const Tab = createMaterialBottomTabNavigator(); export default function BottomNavigator({ navigation, route }) { useFocusEffect(() => { const routeName = getFocusedRouteNameFromRoute(route); navigation.setOptions({ headerShown: routeName == 'Home' }); }); return ( <Tab.Navigator initialRouteName={'AddPatient'}> <Tab.Screen name="AddPatient" component={AddPatientStack} /> <Tab.Screen name="Home" component={HomeScreen} /> </Tab.Navigator> ); } 演示