React native 反应本地导航&；误差边界

我正在实现我的第一个react原生项目&处理错误的最佳方法似乎是使用应用程序级错误边界。我正在努力思考如何将其与

react本机导航集成。当前代码如下所示：

# App.js

...

const startApp = () => {
  Navigation.startSingleScreenApp({
    screen: {
      screen: 'App.Splash',
      navigatorStyle: {
        navBarHidden: true,
      },
    },
  });
};

export function startTabs() {
  registerScreens(store, Provider);
  sagaMiddleware.run(RootSaga);

  loadIcons().then(() => {
    // Start app only if all icons are loaded
    startApp();
  });
}

startTabs();

和screens.js：

# app/Screens.js

...

export default function registerScreens(store, Provider) {
  Navigation.registerComponent('App.Splash', () => SplashContainer, store, Provider);
  ...
 });

因为
Navigation.startSingleScreenApp
不返回组件，所以我正在努力找出如何在导航器内部或外部立即包装错误边界。我试图浏览react本机导航文档，但找不到太多帮助。任何想法都值得赞赏。
当我有这样的需求时，我所做的是，我显示了
Root
HOC组件，它包装了第一个屏幕，而不是实际的第一个屏幕。然后您可以在
Root
中处理错误，因为它将始终被加载，并使用
Root
组件的
this.props.navigator
来显示错误，例如，使用
showmodel（）

拥有
Root
组件的另一个好处是，您可以非常轻松地从侧菜单切换显示的Root屏幕，而无需任何特殊的处理导航操作。或者您可以实现splash->login->home flow，就像我在下面的示例中所做的那样

它可以是这样的：


类根：组件{
静态类型={
导航器：PropTypes.instanceOf（navigator）.isRequired；
}
建造师（道具）{
this.state={
内容：，
};
//添加以HandlenNetworkError（）作为回调的网络侦听器
}
handleLoadComplete=（）=>{
这是我的国家({
内容：，
});
}
handleLoginComplete=（）=>{
这个.setState（{
内容：，
});
}
HandlenNetworkError=（错误）=>{
this.props.navigator.showmodel（screens.NetworkError{
passProps:{error}，
});
}
render（）{
返回此.content；
}
}
当我有这样的需求时，我做了什么，我显示了
Root
HOC组件，它包装了第一个屏幕，而不是实际的第一个屏幕。然后您可以在
Root
中处理错误，因为它将始终被加载，并使用
Root
组件的
this.props.navigator
来显示错误，例如，使用
showmodel（）

拥有
Root
组件的另一个好处是，您可以非常轻松地从侧菜单切换显示的Root屏幕，而无需任何特殊的处理导航操作。或者您可以实现splash->login->home flow，就像我在下面的示例中所做的那样

它可以是这样的：


类根：组件{
静态类型={
导航器：PropTypes.instanceOf（navigator）.isRequired；
}
建造师（道具）{
this.state={
内容：，
};
//添加以HandlenNetworkError（）作为回调的网络侦听器
}
handleLoadComplete=（）=>{
这是我的国家({
内容：，
});
}
handleLoginComplete=（）=>{
这个.setState（{
内容：，
});
}
HandlenNetworkError=（错误）=>{
this.props.navigator.showmodel（screens.NetworkError{
passProps:{error}，
});
}
render（）{
返回此.content；
}
}
对于记录，我解决了这个问题，将错误边界包装在父提供者中，并将其传递给每个导航器屏幕。例如：

// ProviderWithErrorBoundary.js

const ProviderWithErrorBoundary = ({ store, children }) => (
  <Provider store={store}>
      <ErrorBoundary>
        {children}
      </ErrorBoundary>
  </Provider>
);

希望这有助于某人
对于记录，我解决了这个问题，将错误边界包装在父提供者中，并将其传递给每个导航器屏幕。例如：

// ProviderWithErrorBoundary.js

const ProviderWithErrorBoundary = ({ store, children }) => (
  <Provider store={store}>
      <ErrorBoundary>
        {children}
      </ErrorBoundary>
  </Provider>
);

希望这对某人有所帮助
我用ErrorBoundary组件分别包装了每个屏幕。也许这不是最优雅或可扩展的选项，但它快速、肮脏、简单，对于我的用例来说，它是最有意义的。
我最后用我的ErrorBoundary组件分别包装了每个屏幕。也许这不是最优雅或可扩展的选项，但它快速、肮脏、简单，对于我的用例来说，它也是最有意义的。
不错的选择！我没想到您可以重新定义
提供者
。我只看到一个小小的限制：所有的屏幕都必须用这个定制的
提供者包装，即使它们不能从中受益。这也很好！我没想到您可以重新定义
提供者
。我只看到一个小小的限制：所有的屏幕都必须用这个定制的
提供者包装，即使它们不能从中受益。