Лучшее навигационное решение для React-Native, которое работает с Redux

Question

Похоже, что осенью 2018 года React Navigation, вероятно, самое надежное навигационное решение для React-Native, отказывается от поддержки Redux.

Предупреждение: в следующей основной версии React Navigation, которая выйдет осенью 2018 года, мы больше не будем предоставлять никакой информации о том, как интегрироваться с Redux, и она может перестать работать.Проблемы, связанные с Redux, которые публикуются в системе отслеживания проблем React Navigation, будут немедленно закрыты.Интеграция Redux может продолжать работать, но она не будет проверяться или учитываться при принятии каких-либо проектных решений для библиотеки.

---

Теперь, есть ли какая-либо другая библиотека, которая прекрасно работает с React-Native?+ Redux?

Answer 1

Уже написано здесь .Вы можете использовать response-navigation-redux-helpers для передачи вашей собственной навигационной реквизита.Также проверьте этот пример.

На случай, если вышеуказанные ссылки удалены, вот шаги, которые следует выполнить из самой ссылки (COPIED) -

Пошаговое руководство

Следующие шаги применимы к response-navigation@^2.3.0 и response-navigation-redux-helpers @ ^2.0.0-бета.

Во-первых, вам нужно добавить в ваш проект пакетact-navigation-redux-helpers.

yarn add react-navigation-redux-helpers

или

npm install --save react-navigation-redux-helpers

Ниже приведен минимальный пример того, как вы можете использовать навигаторы в приложении Redux:

import {
  createStackNavigator,
} from 'react-navigation';
import {
  createStore,
  applyMiddleware,
  combineReducers,
} from 'redux';
import {
  reduxifyNavigator,
  createReactNavigationReduxMiddleware,
  createNavigationReducer,
} from 'react-navigation-redux-helpers';
import { Provider, connect } from 'react-redux';
import React from 'react';

const AppNavigator = createStackNavigator(AppRouteConfigs);

const navReducer = createNavigationReducer(AppNavigator);
const appReducer = combineReducers({
  nav: navReducer,
  ...
});

// Note: createReactNavigationReduxMiddleware must be run before reduxifyNavigator
const middleware = createReactNavigationReduxMiddleware(
  "root",
  state => state.nav,
);

const App = reduxifyNavigator(AppNavigator, "root");
const mapStateToProps = (state) => ({
  state: state.nav,
});
const AppWithNavigationState = connect(mapStateToProps)(App);

const store = createStore(
  appReducer,
  applyMiddleware(middleware),
);

class Root extends React.Component {
  render() {
    return (
      <Provider store={store}>
        <AppWithNavigationState />
      </Provider>
    );
  }
}

Как только вы это сделаете, ваше состояние навигации будет сохранено в вашем хранилище Redux, после чего вы сможете запускать действия навигации, используяВаша функция отправки Redux.

Имейте в виду, что когда навигатору дается навигационная опора, он отказывается от контроля своего внутреннего состояния.Это означает, что теперь вы несете ответственность за сохранение его состояния, обработку любых глубоких ссылок, обработку аппаратной кнопки «Назад» в Android и т. Д.

Состояние навигации автоматически передается от одного навигатора к другому, когда вы их вкладываете.Обратите внимание, что для того, чтобы дочерний навигатор мог получить состояние от родительского навигатора, он должен быть определен как экран.

Применяя это к примеру выше, вы можете вместо этого определить AppNavigator, чтобы он содержал вложенный TabNavigator следующим образом:

const AppNavigator = createStackNavigator({
  Home: { screen: MyTabNavigator },
});

В этом случае, как только вы подключите AppNavigator к Redux, как это делается в AppWithNavigationState, MyTabNavigator автоматически получит доступ к состоянию навигации в качестве свойства навигации.