小编dar*_*ire的帖子

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

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

react-native react-navigation

7
推荐指数
1
解决办法
2491
查看次数

标签 统计

react-native ×1

react-navigation ×1