标签: react-navigation-v5

此问题的用例是让抽屉菜单（如“设置”）仅在“主屏幕”中可用。在“主屏幕”上可能有许多按钮链接到堆栈导航的其他屏幕，其中抽屉不可用。

主要问题是如何仅在 Stack Navigator 的特定屏幕上启用抽屉导航？在下面的示例中，抽屉在堆栈的所有页面上都可用。我尝试过gestureEnabled但没有成功：

  const StackHome = () => (
    <Stack.Navigator>
      <Stack.Screen name="Home" component={Home} />
      <Stack.Screen name="Example1" component={Example1} />
      <Stack.Screen name="Example2" component={Example2} />
    </Stack.Navigator>
  );
  <Drawer.Navigator initialRouteName="Home">
      <Drawer.Screen name="Home" component={StackHome} />
      <Drawer.Screen name="Settings" component={Settings} />
  </Drawer.Navigator>

另一方面，如果我尝试将其作为屏幕Drawer之一Stack，那么我总是有相同的标题栏（例如“标题”）

我有一个使用 React Navigation 的 React Native 应用程序。该应用程序已经包含一个嵌套堆栈导航器的选项卡导航器。现在我还想在最顶层添加抽屉导航，显示自定义抽屉内容。

因此，我的层次结构将是 DrawerNavigator（嵌套 1 个 TabNavigator）> TabNavigator（嵌套 5 个 StackNavigator）> Stack Navigator（嵌套单个数量的实际内容屏幕）。

为了实现这一点，我在顶层添加了抽屉导航器，嵌套现有的选项卡导航器：

<Drawer.Navigator
    initialRouteName="MainTabNav"
    drawerContent={props => <DrawerMenu {...props} />}
    screenOptions={{
        headerShown: false,
    }}>
    <Drawer.Screen name="MainTabNav" component={MainTabNavigator} />
</Drawer.Navigator>

现在我的问题是：当我从左向右滑动时，抽屉就会出现，只要我将手指放在屏幕上，我就可以看到我的自定义抽屉导航组件。每当我将手指从屏幕上移开时，抽屉式导航就会自动再次关闭。

此外，navigation.dispatch(DrawerActions.openDrawer())从 Stack Navigator 内的 Pressable 调用不会执行任何操作 - 抽屉根本不会打开。

...
import {useNavigation} from '@react-navigation/native';
import {DrawerActions} from '@react-navigation/native';

const DrawerMenuButton = props => {
  const navigation = useNavigation();

  return (
    <Pressable
      onPress={() => {
        navigation.dispatch(DrawerActions.toggleDrawer());
      }}>
...

有谁知道解决这个问题的办法吗？

非常感谢并致以最诚挚的问候智能家居制造商

PS：我的配置如下

"react": "17.0.2",
"react-native": …

我想screenProps在 React-navigation 中传递一些东西v5.x.x。我是 react-native 的新人之一。谁能帮我？

我正在使用 React Navigation5。我有一个选项卡导航器，想清除单击选项卡上的选项卡历史记录。例如，我在选项卡 1 上，然后转到选项卡 2。从选项卡 2，我导航

屏幕1->屏幕2->屏幕3

现在如果我点击选项卡，它应该进入初始屏幕（screen1）。但它不起作用，它以错误的方式工作。这是我的代码。

import React from 'react';

import { createStackNavigator } from '@react-navigation/stack';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
import { CommonActions, StackActions } from '@react-navigation/native';


// Custom imports:
import StartScreen from '../screens/start/StartScreen';
import ProductsScreen from '../screens/products/ProductsScreen';
import AddCustomerScreen from '../screens/customers/AddCustomerScreen';
import CustomersScreen from '../screens/customers/CustomersScreen';
import WebviewScreen from '../screens/webview/WebviewScreen';

// Menu Screen
import MenuScreen from '../screens/menu/MenuScreen';
import CurrentAccountScreen from '../screens/menu/CurrentAccountScreen';
import AccountDetailScreen from '../screens/menu/AccountDetailScreen';
import AppInfoScreen from '../screens/menu/AppInfoScreen';
import MessagesScreen from '../screens/menu/MessagesScreen';

import { …

所以我嵌套了导航器

Main BottomTab.Navigator

• 配置文件底部选项卡 # 1 (Stack.Navigator)
  • 个人资料视图（屏幕）
  • 追随者（屏幕）
  • 关注（顶部 Tab.Navigator）
    • 页面（屏幕）
    • 组（屏幕）
• 进料底部标签 #2（堆叠）
• 其他一些底部选项卡 #3（堆栈）

问题是当我从 Profile View Screen 导航到 Follow Navigator 时，我将一些参数传递给了父 Follow Navigator，并且我希望所有这些参数都在子选项卡屏幕（页面/组）中。

但是子选项卡屏幕的路由没有获取传递给父导航器的参数（以下选项卡导航器）

有没有办法做到这一点？

这是我的代码： 配置文件堆栈

const ProfileStack = () => (
  <Stack.Navigator
    initialRouteName='profileView'
  >
    <Stack.Screen
      name='profileView'
      component={ProfileScreen}
      options={{
        headerMode: 'screen',
        headerShown: false,
      }}
    />

    <Stack.Screen
      name='followers'
      component={FollowersScreen}
      options={{
        headerTitle: 'Followers',
      }}
    />
    <Stack.Screen
      name='following'
      component={FollowingTabs}
      options={{
        headerTitle: 'Following',
      }}
    />
 </Stack.Navigator>

跟随标签

const Tabs = createMaterialTopTabNavigator();
export const FollowingTabs …

在我的导航文件中，当我想切换抽屉时，出现以下错误：

类型错误：navigation.openDrawer 不是函数。（在 'navigation.openDrawer()' 中，'navigation.openDrawer' 未定义）

这是我的抽屉：

const DrawerNavigator = () => {
    return (
        <Drawer.Navigator
            initialRouteName="MYSHIFT"
        >
            <Drawer.Screen name="MYSHIFT" component={TopTabNavigator} />
        </Drawer.Navigator>
    )
}

这是我的容器导航：

const CareworkerNavigation = () => {
    return (
        <NavigationContainer>
            <Stack.Navigator>

                <Stack.Screen
                    name="Login"
                    component={LoginScreen}
                    options={{ headerShown: false }} />

                <Stack.Screen
                    name="Main"
                    options={({ navigation }) => {
                        return {
                            headerLeft: () => <Button title="LEFT BUTTON" onPress={() => {
                                navigation.toggleDrawer(); // <--- this line throws an error 
                            }} />
                        }
                    }}
                    component={DrawerNavigator} />

            </Stack.Navigator>
        </NavigationContainer>
    )
} …

我正在使用 React Native 和 React Native 导航。当我尝试访问 Route.params 时，它说它是一个未定义的对象。我可以使用 this.props.navigation.navigate 方法导航到 PokeDetails 屏幕，但我无法从 route.params.etc 获取参数......请参阅下面的代码。谢谢！

//Home.js

import React, { useState } from "react";
import { View, Text , Button, FlatList, ActivityIndicator, TouchableOpacity, Image } from "react-native";
import { GlobalStyles } from "../styles/GlobalStyles";
import PokeDetails from "./PokeDetails";



class Home extends React.Component {

    constructor(props) {
        super(props);
        this.state = {
            isLoading: true,
            dataSource: [],
        }
    }

    componentDidMount() {
        fetch(`https://pokeapi.co/api/v2/pokemon/?limit=20`)
            .then((res)=> res.json())
            .then((response)=> {
                this.setState({
                    isLoading: false,
                    dataSource: response.results,
                })
                console.log("RESPONSE",response)
                console.log("RESPONSE.RESSSULTS",response.results)
            })

    } …

在React Navigation 5 Auth Flow中，它表示当条件状态发生变化时屏幕将自动导航。

• 我已将屏幕设置为当
  isAuthenticated 的状态更改为 true 时导航到 HomeScreen。
• 控制台中没有错误。isAuthenticated 确实更改为 true，但状态更改后屏幕未导航到主屏幕。
• 我还尝试在操作创建器中使用 {NavigationActions} 和 {CommonActions} 等替代方案。强制导航，但也不起作用。

AuthStackNav.js

import React from 'react';
import { connect } from 'react-redux';
import {createStackNavigator} from '@react-navigation/stack';
import AuthScreen from '../screens/AuthScreen';
import HomeScreen from '../screens/HomeScreen';

const AuthStackNav = ({isAuthenticated}) => {
    const AuthStack = createStackNavigator();

    return (        
        <AuthStack.Navigator initialRouteName='Auth'>
        {
            isAuthenticated ?
            <AuthStack.Screen name='Home' component={HomeScreen} />                
            :
            <AuthStack.Screen  name='Auth' component={AuthScreen} />      
        }                       
                         
        </AuthStack.Navigator>
        
    );
};
const mapStateToProps = ({isAuthenticated}) => { …

我是 React navtive 的新手，想知道如何处理 React-navigation v5 的路由名称。

我正在开始一个公司内部样板项目，在版本 4 中使用反应导航，并将其更新到版本 5。到目前为止，一切运行良好。

现在的问题是，该项目使用的文件的所有路由名称定义如下：

export const HOME_ROUTE = 'Home';
export const LOGIN_ROUTE = 'Login';
export const REGISTER_ROUTE = 'Register';

这也适用于 React-navigation v5。

然后我想消除任何类型的导航道具上的警告。文档指出我应该添加类型定义。然后我遇到了第一个问题。

对于路线常量，我希望以某种方式这样做：

export type RootStackParamList = {
  HOME_ROUTE: undefined;
  LOGIN_ROUTE: undefined;
  REGISTER_ROUTE: undefined;
};

这不起作用，因为我找不到在类型定义中使用常量的方法（这是有道理的）。

我正在考虑完全删除路线常量，但缺点是我在输入路线名称时没有自动完成功能，这可能会导致难以发现错误。至少我认为这可能会发生。

有处理这个问题的首选方法吗？我研究了其他一些样板项目，但它们都只是使用字符串作为路由名称。

我React Navigation 5在我的 React Native 应用程序中使用了 new 。

主菜单由RootNavigatora处理Drawer。登录/注册由AuthNavigationwhich处理Stack。

我试图在成功登录后将用户发送到Home屏幕RootNavigator。换句话说，我试图通过发出将用户发送到另一个导航器下的屏幕，navigation.navigate('RootNavigator', {screen: 'Home'});但我收到一个错误消息：

任何导航器都未处理负载为 {"name":"RootNavigator"} 的操作“NAVIGATE”。

你有一个名为“RootNavigator”的屏幕吗？

这是我的App.js样子：

const App = () => {

  const [isLoading, setIsLoading] = useState(true);
  const [isAuthenticatedUser, setIsAuthenticatedUser] = useState(false);

  useEffect( () => {

    // Check for valid auth_token here
    // If we have valid token, isLoading is set to FALSE and isAuthenticatedUser is set to TRUE
  });

  return …