Блог

Я получаю сообщение об ошибке

withNavigation можно использовать только в иерархии представлений навигатора. Обернутый компонент не может получить доступ к навигации из реквизитов или контекста.

Я использую NavigationEvents, чтобы мой экран отображался повторно даже при использовании кнопки «Назад», так как я не могу использовать componentDidMount, так как экран уже находится в стеке. Но при использовании NavigationEvents я получаю вышеуказанную ошибку, я новичок в кодировании, пожалуйста, помогите мне

Снимок экрана с Ошибкой

Location.js

Его компонент экрана, импортированный в App.js файл приведен ниже, но я все еще получаю эту ошибку.

 import React, { Component } from 'react';

import {NavigationEvents} from 'react-navigation';


export default class Location extends Component {
 onRenderHandler = () => {
   //some function to be called once the screen renders
}

 render () {
  return (
    <View>
      <NavigationEvents onDidFocus={() => onRenderHandler()} />
      //body of the render function
    </View>
}
 

App.js файл

 import React from "react";
import {
  View,
  Text,
  SafeAreaView,StatusBar
} from "react-native";
import { ThemeProvider } from "styled-components";
import 'react-native-gesture-handler';
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';

import theme from "./theme"

import Introduction from "/screens/Introduction";
import Location from "/screens/Location";

import SearchLocation from "/screens/SearchLocation";

const Stack = createStackNavigator();

class App extends React.Component {
  constructor(){
    super();
    this.state = {

    }
  }

  render(){
    return (  
      <SafeAreaView style={{flex: 1}}>
      <StatusBar
        animated={true}
        backgroundColor="#61dafb"/>
      <NavigationContainer>
        <ThemeProvider theme={theme}>
          <Stack.Navigator
            initialRouteName="Introduction">
            <Stack.Screen name="Introduction" component={Introduction} options={{ headerShown: false, animationEnabled: false }}/>
            <Stack.Screen name="Location" component={Location} options={{ headerShown: false, animationEnabled: false }}/>
            <Stack.Screen name="SearchLocation" component={SearchLocation} options={{ headerShown: false, animationEnabled: false }} />
          </Stack.Navigator>
        </ThemeProvider>
      </NavigationContainer>
      </SafeAreaView>
    )
  }
}

export default App;