React-navigation Граница ошибки, по которой можно перемещаться

Question

Какой самый чистый способ обернуть все экраны, управляемые реагирующей навигацией, в границу ошибки, которая также может перемещаться.Мой текущий подход включает компонент верхнего уровня, такой как:

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

с довольно стандартной границей ErrorBoundary:

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 вызывается снова с нулем.

Альтернативно, есть ли способ иметь ErrorBoundary как потомок AppNavigator, который ловит ошибки с любого экрана и может также получить доступ к навигатору, в конечном счете через NavigationService?

Answer 1

Вы должны быть в состоянии сделать это с помощью пользовательских навигаторов, ниже приведен пример с новым API-интерфейсомин-навигации V3 createAppContainer согласно, 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;