在 react-native 的其他组件中找不到变量导航

Question

这是我的 App.js

import React from "react";

import Menu from "./components/Menu";

import HomeScreen from "./views/HomeScreen";
import SecondScreen from "./views/SecondScreen";

import { NavigationContainer } from "@react-navigation/native";
import { createStackNavigator } from "@react-navigation/stack";
const Stack = createStackNavigator();

export default function App() {
  return (
    <Container>
        <NavigationContainer>
          <Stack.Navigator>
            <Stack.Screen
              name="Home"
              component={HomeScreen}
            />
            <Stack.Screen name="Second" component={SecondSCreen} />
          </Stack.Navigator>
        </NavigationContainer>
      <Menu></Menu>
    </Container>
  );
}

它可以工作，因为它默认显示 HomeScreen，但我想通过 Menu-组件导航到第二个屏幕：

import React from "react";
import { View, Text, TouchableOpacity } from "react-native";

class Menu extends React.Component {
  render() {
    return (
      <View>
        <TouchableOpacity
          onPress={() => {
            alert("Hi");
          }}
        >
          <Text>HomeScreen</Text>
        </TouchableOpacity>

        <TouchableOpacity
          onPress={() => {
            navigation.navigate("Second");
          }}
        >
          <Text>Screen 2</Text>
        </TouchableOpacity>
      </View>
    );
  }
}

export default Menu;

该组件是可见的，但是当我单击第二个按钮时，我希望 SecondScreen 处于打开状态。 但我得到这个错误：

找不到变量：导航

我错过了什么？

Answer 1

对于这种情况，您应该使用navigationRef，因为您的菜单位于导航容器之外

import { NavigationContainer } from '@react-navigation/native';
import { navigationRef } from './RootNavigation';

  export default function App() {
  return (
    <Container>
        <NavigationContainer ref={navigationRef}>
          <Stack.Navigator>
            <Stack.Screen
              name="Home"
              component={HomeScreen}
            />
            <Stack.Screen name="Second" component={SecondSCreen} />
          </Stack.Navigator>
        </NavigationContainer>
      <Menu></Menu>
    </Container>
  );
}

// RootNavigation.js

import * as React from 'react';

export const navigationRef = React.createRef();

export function navigate(name, params) {
  navigationRef.current?.navigate(name, params);
}

在菜单js中，

从 'RootNavigation' 导入 {navigate}；

class Menu extends React.Component {
  render() {
    return (
      <View>
        <TouchableOpacity
          onPress={() => {
            alert("Hi");
          }}
        >
          <Text>HomeScreen</Text>
        </TouchableOpacity>

        <TouchableOpacity
          onPress={() => {
            navigate("Second");
          }}
        >
          <Text>Screen 2</Text>
        </TouchableOpacity>
      </View>
    );
  }
}