Javascript 错误组件无法在react native中导航

我已将ErrorComponent放在App.js的顶部，但它无法导航到主屏幕。还有别的办法吗？任何指导都将不胜感激。我试过了，但对我来说似乎不起作用

App.js

export class App extends Component {
  render() {
    return (
      <ErrorInterceptor>
        <Provider store={store}>
          <PersistGate loading={null} persistor={persistor}>
            <StackNavigation />
          </PersistGate>
        </Provider>
      </ErrorInterceptor>
    );
  }
}

导出类应用程序扩展组件{
render（）{
返回(
);
}
}

ErrorInceptor.js

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

export default class ErrorInterceptor extends Component {
  state = {hasError: false};

  static getDerivedStateFromError(error) {
    // Update state so the next render will show the fallback UI.
    return {hasError: true};
  }

  componentDidCatch(error, errorInfo) {
    // You can also log the error to an error reporting service
    // logErrorToMyService(error, errorInfo);
  }

  changeState = () => {
    // console.log('working');
    this.setState({hasError: false});
    this.props.navigation.navigate('Home');
  };

  render() {
    if (this.state.hasError) {
      // console.log(this.props);
      // You can render any custom fallback UI
      return (
        <View>
          <Text> Something Went Wrong..! </Text>
          <TouchableOpacity
            onPress={() => this.changeState()}
            style={{width: '40%'}}>
            <Text
              style={{
                backgroundColor: '#898989',
                paddingVertical: 10,
                borderRadius: 5,
                color: 'white',
                width: '100%',
                textAlign: 'center',
              }}>
              Return to Home
            </Text>
          </TouchableOpacity>
        </View>
      );
    }

    return this.props.children;
  }
}

import React，{Component}来自'React'；
从“react native”导入{Text，View，TouchableOpacity}；
导出默认类ErrorInterceptor扩展组件{
状态={hasError:false}；
静态getDerivedStateFromError（错误）{
//更新状态，以便下一次渲染将显示回退UI。
返回{hasError:true}；
}
componentDidCatch（错误，errorInfo）{
//您还可以将错误记录到错误报告服务
//logErrorToMyService（错误，errorInfo）；
}
changeState=（）=>{
//console.log（'working'）；
this.setState（{hasError:false}）；
this.props.navigation.navigate（'Home'）；
};
render（）{
if（this.state.hasError）{
//console.log（this.props）；
//您可以呈现任何自定义回退UI
返回(
出了点问题。。！
this.changeState（）}
样式={{width:'40%}}>
返乡
);
}
返回此.props.children；
}
}

这是因为您的错误边界超出了导航范围，这就是您无法使用导航道具在屏幕之间导航的原因

---

由于范围的原因，react的withNavigation在这里也不起作用。我认为您唯一能做的就是在根组件的组件挂载上创建导航道具的引用，并将其设置在react上下文或redux存储中，并将其用作访问错误边界类中导航道具的引用。

这是因为您的错误边界超出了导航范围，这就是你不能使用导航道具在屏幕之间导航的原因

---

由于范围的原因，react的withNavigation在这里也不起作用。我认为您唯一能做的就是在根组件上的组件挂载上创建导航道具的引用，并将其设置在react上下文或redux存储中，并将其用作访问错误边界类中导航道具的引用。

谢谢。让我尝试一下，确保将存储提供程序组件包装在错误边界组件的顶部，以便在其范围内。不工作。一切都白费了。还有别的办法吗？查一下，谢谢。让我尝试一下，确保将存储提供程序组件包装在错误边界组件的顶部，以便在其范围内。不工作。一切都白费了。还有别的办法吗？看看这个