Реагируйте на собственные границы навигации и ошибки - PullRequest
Новая
       8

Реагируйте на собственные границы навигации и ошибки

0 голосов
/ 28 мая 2018

Я реализую свой первый собственный реактивный проект, и кажется, что лучший способ справиться с ошибками - использовать границы ошибок на уровне приложения.Я пытаюсь понять, как интегрировать это с 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 не возвращает компонент, я изо всех сил пытаюсь понять, какоберните границу ошибки непосредственно внутри или снаружи навигатора.Я попытался просмотреть документацию по реактивной навигации, но не смог найти особой помощи.Любые идеи приветствуются.

Ответы [ 2 ]

0 голосов
/ 31 мая 2018

Для записи я решил эту проблему, обернув границу ошибки внутри родительского провайдера и передав ее на каждый экран навигатора.Например: 

// 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);
})

Надеюсь, это кому-нибудь поможет

0 голосов
/ 28 мая 2018

Что я делал, когда у меня было такое требование, я отображал Root компонент HOC, который оборачивает первый экран вместо фактического первого экрана.Тогда вы можете обрабатывать ошибки внутри Root, потому что он всегда будет загружаться и использовать this.props.navigator из Root компонента для отображения ошибок, например, с showModal().

Еще одно преимущество наличия Root компонент, который вы можете легко переключать отображаемый корневой экран из бокового меню без каких-либо специальных действий навигации.Или вы можете реализовать splash-> login-> home flow, как я делал в примере ниже.

Это может выглядеть так: 

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>
...