1

我正在实施我的第一个反应原生项目，似乎处理错误的最佳方法是使用应用程序级错误边界。我正在努力弄清楚我们如何将其与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不返回组件，所以我正在努力弄清楚如何在导航器内部或外部立即包装错误边界。我尝试浏览 react-native-navigation 文档，但找不到太多帮助。任何想法表示赞赏。

4

3 回答 3

3

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

// ProviderWithErrorBoundary.js

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

然后传入我的Screens.jsvia

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

希望这可以帮助某人

于 2018-05-31T16:14:05.550 回答
1

当我有这样的要求时我做了什么，我显示Root了包含第一个屏幕的 HOC 组件，而不是实际的第一个屏幕。Root然后您可以this.props.navigator在.RootshowModal()

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

它看起来像这样：

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>

于 2018-05-28T03:15:58.100 回答
0

我最终用我的 ErrorBoundary 组件单独包装了每个屏幕。也许不是最优雅或可扩展的选项，但它快速、肮脏且简单，而且对于我的用例来说，它是最有意义的。

于 2020-05-27T14:48:14.180 回答