时间戳

首页 > 解决方案 > React Native Navigation 5.x 给出导航错误

react-native - React Native Navigation 5.x 给出导航错误

问题描述

几个月前我切换到@react-navigation/native了我认为我非常了解的 v5.x。但是如果我想在屏幕之间移动，我会得到一个错误：

错误：找不到导航对象。您的组件是否在导航器的屏幕内？

导航器.js

import React from 'react';

import {NavigationContainer} from '@react-navigation/native';
import {createStackNavigator} from '@react-navigation/stack';
import {createMaterialBottomTabNavigator} from '@react-navigation/material-bottom-tabs';

import AddBook from '../screens/AddBook';
import BookArchive from '../screens/BookArchive';
import SearchResults from '../screens/SearchResults';

const Stack = createStackNavigator();

const Navigator = () => {
  return (
    <NavigationContainer>
      <Stack.Navigator>
        <Stack.Screen name="Add" component={AddBook} />
        <Stack.Screen name="Results" component={SearchResults} />
        <Stack.Screen name="Archive" component={BookArchive} />
      </Stack.Navigator>
    </NavigationContainer>
  );
};

export default Navigator;

AddBook.js

.. // 代码

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

const AddBook = ({data, loading}) => {
  const navigation = useNavigation();

..// 代码

<Button
title="Search"
style={styles.button}
onPress={() => navigation.navigate('Results')}
/>

来自官方文档：

如果我们使用未在堆栈导航器上定义的路由名称调用 navigation.navigate，则不会发生任何事情。换句话说，我们只能导航到在我们的堆栈导航器上定义的路由——我们不能导航到任意组件。

我的页面正确列出（非常简单），那么为什么它不起作用并且我收到错误消息？

谢谢

标签： react-nativereact-navigation-v5

解决方案

我不知道发生了什么，但我必须创建另一个应用程序并将所有内容移到那里，并且可以正常工作！可能有些安装出错了...

推荐阅读