React-navigation 可以导航的错误边界答案

【问题标题】：React-navigation Error boundary that can navigateReact-navigation 可以导航的错误边界
【发布时间】：2019-03-16 18:05:28
【问题描述】：

将所有由 react-navigation 管理的屏幕包装在一个也可以导航的错误边界中的最干净的方法是什么。我目前的方法涉及一个顶级组件，例如：

class App extends Component{
  navigateTo(routeName) {
    this.navigator && this.navigator.dispatch(NavigationActions.navigate({ routeName }));
  }

  render(){
    return (
      <Provider store={store}>
        <PersistGate persistor={persistor}>
          <MenuProvider>
            <ErrorBoundary navigateTo={this.navigateTo.bind(this)}>
              <AppNavigator
                ref={navigator=> {
                  NavigationService.setTopLevelNavigator(navigator);
                  this.navigator = navigator;
                }}
              />
            </ErrorBoundary>
          </MenuProvider>
        </PersistGate>
      </Provider>
    )
  }
}

带有相当标准的错误边界：

class ErrorBoundary extends React.Component {
  constructor(props) {
    super(props);

    this.state = { error: null, info: null };
  }

  componentDidCatch(error, info) {
    this.setState({error, info});
    this.props.navigateTo('SomeScreen');
  }

  render() {
    if (this.state.error) {
      return (
        <Container>
          <Content>
            <Text> Got error: {JSON.stringify(this.state.error)}, info {JSON.stringify(this.state.info)} </Text>
          </Content>
        </Container>
      )
    }

    return this.props.children;
  }
}

但是，当发生错误时，导航器会被卸载，并且 ref 会再次使用 null 调用。

或者，有没有办法让 ErrorBoundary 作为 AppNavigator 的后代，它可以从任何屏幕捕获错误并且还可以访问导航器，最终通过 NavigationService 访问？

【问题讨论】：

标签： react-native react-navigation

【解决方案1】：

您应该能够使用自定义导航器执行此操作，下面是一个使用新的 react-navigation V3 createAppContainer api 的示例，https://reactnavigation.org/docs/en/custom-navigators.html。

我们刚刚在我们的应用中实施了一个修订，以便在升级到 V3 时实现这一点。

这样，当错误边界命中时，您的 AppNavigator 仍将被挂载，并且可以访问您的导航道具。

const StackNavigator = createStackNavigator({..});

class AppNavigator extends React.Component {
 static router = StackNavigator.router;
  render() {
    const { navigation } = this.props;
    return (
      <ErrorBoundary navigation={navigation}>
        <StackNavigator navigation={navigation} />
      </ErrorBoundary>
    );
  }
}

const AppContainer = createAppContainer(AppNavigator);
export default AppContainer;

【讨论】：