我正在尝试从一个StackNavigator路由到另一个,这两个都在TabNavigator中.我现在能够通过简单地做到:

this.props.navigation.navigate('Screen3')

但是当我去它时我也想重置那个标签.以下是我的应用导航器的设置方式:

- Main (StackNavigator)
  - LoginScreen
  - MainTabs (TabNavigator)
    - Tab1 (StackNavigator)
      - Screen1
      - Screen2
    - Tab2 (StackNavigator)
      - Screen3
      - Screen4

我如何导航Screen3但重置StackNavigator Tab2？

我也尝试过这样做,但无济于事:

let resetAction = NavigationActions.reset({
  index: 0,
  key: 'Tab2',
  actions: [
    NavigationActions.navigate({ routeName: 'Screen3' })
  ],
});

this.props.navigation.dispatch(resetAction);

我想知道如何从嵌套在材料底部标签栏上的堆栈导航器内的特定屏幕隐藏底部标签栏

这是我的堆栈导航器代码

import React from 'react';
import { createStackNavigator } from '@react-navigation/stack';
import PondScreen from '../screens/PondScreen/PondScreen';
import PondDetailScreen from '../screens/PondScreen/PondDetailScreen';

const Stack = createStackNavigator();

export function PondStack() {
  return (
    <Stack.Navigator
      initialRouteName="PondScreen"
      headerMode="none"
      mode="card"
    >
      <Stack.Screen
        name="PondScreen"
        component={PondScreen}
      />
      <Stack.Screen
        name="PondDetailScreen"
        component={PondDetailScreen}
        options={{
          tabBarVisible: false
        }}
      />
    </Stack.Navigator>
  );
}

这是我的材料底部选项卡导航器的代码

import React from 'react';
import { View } from 'react-native';
import { createMaterialBottomTabNavigator } from '@react-navigation/material-bottom-tabs';
import { Entypo, Feather } from '@expo/vector-icons';
import { PondStack } from './StackNavigators'; …

useNavigation我正在尝试从 React Navigation 中输入。我希望能够仅传递路线的名称，但除非我也传递该路线的道具，否则我会收到错误。

根据文档，我理解实现应该如下所示：

import { StackNavigationProp } from '@react-navigation/stack';

type StackParamList = {
    Home: { foo: string, onBar: () => void }
    About: AboutProps
}

type NavigationProps = StackNavigationProp<StackParamList>

const MyComponent = () => {
  const navigation = useNavigation<NavigationProps>()

  const handleOnNavigate = () => navigation.navigate('Home')
  //                                                    ^ TypeError!

我在最后一行收到 TypeError 。如果我为该路线添加道具，错误就会消失，但我不必这样做。

navigation.navigate('Home', { foo: 'hello', onBar: () => {} })

查看类型声明navigation.navigate（见下文），这应该不是必需的，因为简单地将路由名称作为唯一参数传递会发生重载。我一定做错了什么，因为这是不被接受的……但是什么、在哪里以及为什么？

这是一个重现 TypeError 的 CodeSandBox。

React 导航 types.d.ts（链接）

navigate<RouteName …

如何隐藏屏幕，使其不显示为 @react-navigation/drawer 版本 6 抽屉中的项目。

在 React Navigation 5 中，它是通过创建像这样的自定义抽屉内容来实现的

const CustomDrawerContent = (props: DrawerContentComponentProps) => {
  const { state, ...rest } = props;
  const includeNames = ["ScreenOne", "ScreenTwo"];
  const newState = { ...state }; //copy from state before applying any filter. do not change original state
  newState.routes = newState.routes.filter(
    (item) => includeNames.indexOf(item.name) !== -1
  );
  return (
    <DrawerContentScrollView {...props}>
      <DrawerItemList state={newState} {...rest} />
    </DrawerContentScrollView>
  );
};

正如另一个答案中所述。TypeError: Cannot read property 'key' of undefined我刚刚升级到react-navigation 6，使用这种技术，当我尝试导航这些隐藏屏幕之一时，我收到错误。谁能帮我吗？

更新 - …

我在我的反应原生项目中使用eslint airbnb.如果我没有验证道具,特别是来自道具,那么eslint throw错误linting react-navigation.

我如何使用PropTypes验证这一点？

我试图像这样验证它:

IntroScreen.propTypes = {
  navigation: PropTypes.shape({
    navigate: PropTypes.func,
  }),
};

但仍然有这样的错误

我如何通过默认道具,我应该？

更新:

反应导航网络支持已完成.请遵循:https: //reactnavigation.org/docs/en/web-support.html

原文:

我尝试在react-native和web之间共享我的代码.当我尝试react-native-web时,它运作良好.但是只有一个问题,如何从网址访问特定的屏幕？我读了react-navigation的文档,没有任何相关内容.和react-router-native可以捕获web url,但它有导航器喜欢StackNavigator/DrawerNavigator.那个想法？

我创建了一个项目,Welcome屏幕导航到MainActivity屏幕.我希望当用户点击后退按钮时,它将关闭应用程序而MainActivity不是返回到Welcome屏幕.我使用该库react-navigation,所以我从Github寻找一些解决方案.

当我使用https://github.com/react-navigation/react-navigation/issues/295中的代码时.我收到错误:

NavigationActions.reset is not a function

我console.log(NavigationActions);

显然没有重置.但是为什么其他人都可以使用这些代码呢？

我无法弄清楚.任何帮助,将不胜感激.提前致谢.

这是我的Welcome.js:

import React, { Component } from 'react';
import { View, Text, ActivityIndicator } from 'react-native';
import { NavigationActions } from 'react-navigation';
import { connect } from 'react-redux';
import { ColorSetting } from './common/ColorSetting';
import { fetchMainMovieList } from '../actions';

class Welcome extends Component {
  static navigationOptions = {
    header: null,
  };

  componentDidMount() {
    // call main page …

我目前正在使用react-navigation堆栈和选项卡导航。

每次用户导航到特定屏幕时是否可以重新渲染组件？我想确保componentDidMount()每次到达特定屏幕时都重新运行，因此我通过调用适当的动作创建者从服务器获取最新数据。

我应该考虑哪些策略？我很确定这是一个常见的设计模式，但我没有看到记录的例子。

我想在react-navigation中使用当前路线或屏幕的名称，如果条件需要进行一些更改，我想在其中使用它。

我是 react-native 的新手，但不是 ReactJs 我从 2 天起就会对这个错误感到生气

error: bundling failed: Error: While trying to resolve module `@react-navigation/native` from file `C:\XXXXX\Example\src\Router.jsx`, the package `C:\XXXXX\Example\node_modules\@react-navigation\native\package.json` was successfully found. However, this package itself specifies a `main` module field that could not be resolved (`C:\XXXXX\Example\node_modules\@react-navigation\native\src\index.tsx`. Indeed, none of these files exist:

error: bundling failed: Error: While trying to resolve module `react-native-safe-area-context` from file `C:\XXXXX\Example\App.js`, the package `C:\XXXXX\Example\node_modules\react-native-safe-area-context\package.json` was successfully found. However, this package itself specifies a `main` module field that could not be resolved …