React Native Error Boundary中实现点击返回按钮回到上一页面

你的ErrorFallback组件里navigation为undefined，核心原因是Error Boundary的fallback组件不会自动接收navigation props，当前通过props获取的方式行不通，以下是两种解决办法：

方法一：直接在组件内使用useNavigation钩子 #

你已经导入了useNavigation但未实际调用，直接在组件内部获取导航实例即可：

修改后的ErrorFallback代码：

import {
    Text,
    View,
    TouchableOpacity,
} from 'react-native';
import React from 'react';
import GoBack from '../../../../../../libs/common/src/lib/Assets/Images/Findings/chevron-left.svg';
import { useNavigation } from '@react-navigation/native';

const ErrorFallback = ({ error, resetError }) => {
    // 直接调用useNavigation获取导航实例
    const navigation = useNavigation();
    
    console.log('-----', navigation)
    return (
        <View style={{ margin: 20, marginTop: 20 }}>
            <TouchableOpacity onPress={() => navigation.goBack()}>
                <GoBack height={30} width={20} style={{ backgroundColor: "black", color: 'black' }} />
            </TouchableOpacity>
            <View style={{ margin: 0 }}>
                <Text style={{ fontSize: 20, marginTop: 10, color: 'red' }}>Error occurred:</Text>
                <Text style={{ fontSize: 18 }}>{error.message}</Text>
            </View>
        </View>
    );
};

export default ErrorFallback;

方法二：从Error Boundary组件传递navigation props #

如果你的Error Boundary组件本身处于导航栈内，可以在渲染fallback时手动把navigation传进去：

假设你的Error Boundary组件代码如下，修改renderFallback部分：

class MyErrorBoundary extends React.Component {
  state = { hasError: false, error: null };

  static getDerivedStateFromError(error) {
    return { hasError: true, error };
  }

  render() {
    if (this.state.hasError) {
      // 将当前组件的navigation props传递给ErrorFallback
      return <ErrorFallback 
               error={this.state.error} 
               resetError={() => this.setState({ hasError: false })}
               navigation={this.props.navigation} 
             />;
    }
    return this.props.children;
  }
}

内容的提问来源于stack exchange，提问作者work sttattion