Я не могу перемещаться без навигационной опоры response-navigation с контейнером react-i18next

Я применяю пример навигации без навигационной опоры из документации по реакции-навигации (NavigationService), но не могу заставить его работать с react-i18next .

Я применил пример документации https://reactnavigation.org/docs/en/navigating-without-navigation-prop.html в моем коде:

// App.js

import React from 'react';
import { Provider } from 'react-redux';
import { PersistGate } from 'redux-persist/lib/integration/react';
import { createAppContainer } from 'react-navigation';
import { I18nextProvider, withNamespaces } from 'react-i18next';
import { persistor, store } from './src/store';
import I18n from './src/localization';
import Navigation from './src/navigation';
import NavigationService from './src/navigation/NavigationService';
import Loader from './src/screens/components/Loader';

class NavigationStack extends React.Component {
  static router = Navigation.router;
  render() {
    const { t } = this.props;
    return <Navigation screenProps={{ t, I18n }} {...this.props} />;
  }
};

const ReloadNavOnLanguageChange = withNamespaces(['common', 'server'], {
  bindI18n: 'languageChanged',
  bindStore: false,
})(createAppContainer(NavigationStack));


export default class App extends React.Component {
  ...
  render() {
    return (
      <Provider store={store}>
        <PersistGate loading={<Loader />} persistor={persistor}>
          <I18nextProvider i18n={ I18n } >
            <ReloadNavOnLanguageChange ref={navigatorRef => {
              NavigationService.setTopLevelNavigator(navigatorRef);
            }} />
          </I18nextProvider>
        </PersistGate>
      </Provider>
    );
  };
};


// Navigation.js

...
export default Navigation = createSwitchNavigator(
  {
    AuthLoading: AuthLoadingScreen,
    Login: LoginScreen,
    App: AppScreen
  },
  {
    initialRouteName: 'AuthLoading'
  }
);


// NavigationService.js

Apply the same code that's in https://reactnavigation.org/docs/en/navigating-without-navigation-prop.html


// Any JS module of my project (actions, helpers, components, etc.)

import NavigationService from 'path-to-NavigationService.js';
...
NavigationService.navigate('Login');

Когда токен авторизации подтвержден и результат отрицательный, должен быть открыт экран входа в систему (NavigationService.navigate('Login')), но он возвращает ошибку _navigator.dispatch is not a function в NavigationService.js:

const navigate = (routeName, params) => {
   // DISPATCH ERROR
   _navigator.dispatch(
     NavigationActions.navigate({
       routeName,
       params
     })
   );
};

Зависимости:

  • реагировать 16.5.0
  • реагировать-родной 57.1
  • реагировать-i18next 9.0.0
  • реагировать-навигация 3.1.2

Любое предложение? Кто-нибудь еще нашел этот сценарий?


react-native react-navigation react-i18next
person Àlex    schedule 16.02.2019    source источник
comment
Замечательно, что вы нашли решение своей проблемы, поэтому рекомендуется опубликовать ответ вместо добавления [РЕШЕНО] или чего-то подобного. прочтите Как задать вопрос и Как ответить   -  person eyllanesc    schedule 18.02.2019
comment
... извините, неправильное редактирование ...   -  person mba    schedule 13.06.2019

Ответы (1)


arrow_upward
0
arrow_downward

Использование параметра innerRef параметра withNamespaces hoc в react-i18next вместо передачи функции через свойство ref корневого компонента… КАК ГОВОРИТ ДОКУМЕНТАЦИЯ REACT-I18NETX!

// App.js

...
const ReloadNavOnLanguageChange = withNamespaces(['common', 'server'], {
  bindI18n: 'languageChanged',
  bindStore: false,
  innerRef: (ref) => NavigationService.setTopLevelNavigator(ref)
})(createAppContainer(NavigationStack));

export default class App extends React.Component {
  ...
  render() {
    return (
      ...
      <ReloadNavOnLanguageChange />
      ...
    );
  };
}
person Àlex    schedule 18.02.2019