錯誤組件無法在本機反應中導航

Question

我已將 ErrorComponent 放在 App.js 的頂部，但它無法導航到主屏幕。 有沒有其他方法可以做到這一點？ 任何指南將不勝感激。 我嘗試了如何從 stack.navigation 外部的組件中使用 navigation.navigate ，但這在我的情況下似乎不起作用。

應用程序.js

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

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;
  }
}

Answer 1

這是因為您的錯誤邊界超出了導航的 scope，這就是您無法使用導航道具在屏幕之間導航的原因。

由於 scope，來自反應導航的 withNavigation 在這里也不起作用。 我認為您唯一能做的就是在根組件上的組件安裝上創建導航道具的引用，並將其設置在您的反應上下文或 redux 存儲中，並將其用作訪問錯誤邊界 class 中的導航道具的參考。