嘗試在兩個站點 React Native 之間導航時，未定義不是對象（評估“navigation.navigate”）

Question

我嘗試在 React Native 應用程序的兩個頁面之間導航。 我的實現不斷出錯，但我不知道為什么。

我在 React Native 應用程序中為“主頁”和“設置”站點設置了以下設置，其中導航器從文檔中調整：

應用程序.js

import Home from "./Home";
import { NavigationContainer } from '@react-navigation/native';

export default function App() {
  return <NavigationContainer><Home/></NavigationContainer>
}

主頁.jsx

const Home = ({ navigation }) => {
  return (
    <View style={["some style...", {}]}>
      <View style={["some style..."]}>
        <TouchableOpacity onPress={() =>
        navigation.navigate('Settings')}>
          <Image "some image..."/>
        </TouchableOpacity>
      </View>
    </View>

設置.jsx

應該渲染的組件。

MyStack.jsx

import * as React from 'react';
import { NavigationContainer } from '@react-navigation/native';
import { createNativeStackNavigator } from '@react-navigation/native-stack';
import Home from './Home';
import Settings from './Settings';

const Stack = createNativeStackNavigator();

const MyStack = () => {
  return (
    <NavigationContainer>
      <Stack.Navigator>
        <Stack.Screen
          name="Home"
          component={Home}
        />
        <Stack.Screen name="Settings" component={Settings} />
      </Stack.Navigator>
    </NavigationContainer>
  );
};

我得到undefined is not an object (evaluating 'navigation.navigate') 。 this.props添加到navigation.navigate('Settings')會拋出錯誤。 我只是無法訪問我的導航器。

Answer 1

您似乎正在設置導航器但從未使用它，因為在App.js中您只是調用<Home/> 。

1. 將App.js更改為以下代碼。

使用正確的導入路徑。

import MyStack from "./MyStack";

export default function App() {
  return <MyStack/>
}

2. 在MyStack.jsx末尾添加：

export default MyStack;