'导航' 未定义 |反应原生 |安卓 |在 App.js 文件中答案

我正在学习 React Native，对此没有太多经验。我正在尝试在 App.js 文件中导航，它在此行给出“TypeError：无法读取未定义的属性 'navigate'”：this.props.navigation.navigate("BlogScreen", {"postId": notification.data .post_id}); 我已经尝试调试它，也尝试了一些已经询问过类似问题的解决方案，但似乎没有一个有效。我认为这些问题和我的区别在于导航代码是写在我的“App.js”文件中的。如果能得到任何帮助，我将不胜感激。

来自 package.json 的一些配置信息：

"@react-navigation/native": "^5.9.3",
"@react-navigation/stack": "^5.14.3",
"axios": "^0.21.1",
"react": "16.13.1",
"react-native": "0.63.4",
"react-redux": "^7.2.2",
"redux": "^4.0.5",
"redux-thunk": "^2.3.0",

以下是我的 App.js 文件

import React, { Component } from 'react'
import AppNavigation from "./app/src/appnavigation/AppNavigation"
import { Provider } from 'react-redux'
import Store from './app/src/redux/store/Store'
import { MenuProvider } from 'react-native-popup-menu'
import FCMServices from "./app/src/utility/PushNotificationHandler"
class App extends Component {
    componentDidMount() {
        let obj = FCMServices.getInstance(this.FCMServiceCallback);
        obj.setNavigationInstance(this.props.navigation);
        obj.register(this.onRegister, this.onNotification, this.onOpenNotification)
    }

    FCMServiceCallback = () => {
        console.log("FCMServiceCallback")
    }

    onRegister = (fcmToken) => {
        console.log(fcmToken, "fcmToken")
    }

    onNotification = (notification) => {
        console.log(notification, 'notificationnotificationnotification')
    }

    onOpenNotification = (notification) => {
        this.handleNotificationsClick(notification)
    }

    handleNotificationsClick = (notification) => {
        if (!notification.data) {
            return;
        } else {
            this.props.navigation.navigate("BlogScreen", {"postId": notification.data.post_id});
            console.log(notification, 'notificationClicked')
        }
    }

    render() {
        return (
            <Provider store={Store}>
            <MenuProvider>
            <AppNavigation />
            </MenuProvider>
            </Provider>
        );
    }
}
export default App

【问题讨论】：

标签： android react-native navigation react-navigation

【解决方案1】：

您的 App.js 没有导航道具。此道具仅提供给导航器中引用的屏幕（堆栈，抽屉，...）

实现这一点的最佳方法是使用deep linking，它为您提供了一个通用界面来与传入和传出应用链接进行交互。

有一个关于它的short tutorial

Related issue

【讨论】：

【解决方案2】：

你需要用 NavigationContainer

包裹整个渲染树

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

export default function App() {
  return (
    <NavigationContainer>{/* Rest of your app code */}</NavigationContainer>
  );
}

建议创建一个新的根堆栈并将您的代码移动到 HomeScreen 组件中以访问导航道具。下面是一个示例，说明如何做到这一点。

 // In App.js in a new project

import * as React from 'react';
import { View, Text } from 'react-native';
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';

function HomeScreen() {
  return (
    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
      <Text>Home Screen</Text>
    </View>
  );
}

const Stack = createStackNavigator();

function App() {
  return (
    <NavigationContainer>
      <Stack.Navigator>
        <Stack.Screen name="Home" component={HomeScreen} />
      </Stack.Navigator>
    </NavigationContainer>
  );
}

export default App;

有用的链接： https://reactnavigation.org/docs/hello-react-navigation#creating-a-stack-navigator

【讨论】：