Question

我正在实施我的第一个反应原生项目＆amp;似乎处理错误的最佳方法是使用应用级错误边界。我正在努力想出如何将其与react-native-navigation进行整合。当前代码如下所示：

# 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没有返回组件，因此我很难弄清楚如何在导航器内部或外部包装错误边界。我尝试了反应原生导航文档，但无法找到很多帮助。任何想法都赞赏。

Answer 1

为了记录，我通过将错误边界包装在父提供程序中并将其传递到每个导航器屏幕来解决此问题。例如：

// ProviderWithErrorBoundary.js

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

然后通过

传递到我的Screens.js

// Screens.js
export default function RegisterScreens(store, Provider) {
  Navigation.registerComponent('App.Home', () => HomeContainer, store, Provider);
})

希望这有助于某人

Answer 2

当我有这样的要求时，我做了什么，我显示了Root HOC组件，它包装了第一个屏幕，而不是实际的第一个屏幕。然后，您可以处理Root内的错误，因为它将始终加载并使用this.props.navigator Root组件来显示错误，例如showModal()。

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

看起来像这样：

class Root: Component {
  static propTypes = {
    navigator: PropTypes.instanceOf(Navigator).isRequired;
  }

  constructor(props) {
    this.state = { 
      content: <Splash navigator={this.props.navigator} onLoadComplete={this.handleLoadComplete} />,
    };
    // Adding network interceptor with handleNetworkError() as callback
  }
  
  handleLoadComplete = () => {
    this.setState({
      content: <Login navigator={this.props.navigator} onLoginComplete={this.handleLoginComplete} />,
    });
  }
  
  handleLoginComplete = () => {
    this.setState({ 
      content: <Home navigator={this.props.navigator} />,
    });
  }
  
  handleNetworkError = (error) => {
    this.props.navigator.showModal(screens.NetworkError, {
      passProps: { error },
    });
  }
  
  render() {
    return this.content;
  }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>

Answer 3

我最终使用ErrorBoundary组件分别包装了每个屏幕。也许不是最优雅或可扩展的选项，但是它是快速，肮脏和容易的，对于我的用例来说，它是最有意义的。

React Native Navigation＆amp;错误边界

3 个答案: