将 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>
)
}
}
Run Code Online (Sandbox Code Playgroud)
使用相当标准的 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)}, …Run Code Online (Sandbox Code Playgroud)