将 react-native-navigation V2 与 redux 集成

Question

在 RNNavigation 的版本 1 中，我通过这种方式将我的商店发送到每个屏幕。

Navigation.registerComponent(RouterConstants.SplashScreen, () => SplashScreen, store, Provider)

但在 V2 中似乎不起作用。

编辑：

index.js:

import configureNavigation from './routers/app_navigation'
import createStore from './reducers'

const store = createStore()
configureNavigation(store, Provider)

class App extends React.Component {
 constructor (props) {
   super(props)
   .
   .
   .
   this.startApp()
 }

 startApp () {
  Navigation.setRoot({
    stack: {
      children: [{
        component: {
          name: RouterConstants.SplashScreen
        }
      }]
    }
  })
 }
}

const app = new App()

app_navigation.js:

import SplashScreen from '../containers/splash_screen_container'
.....
...


const initializeRouter = (store, Provider) => {
    Navigation.registerComponent(RouterConstants.SplashScreen, () => SplashScreen, store, Provider)
    ....
    ..

}
export default initializeRouter

Answer 1

您似乎无法以旧方式向提供商注册。

因此，作为解决方法，您可以创建一个 HOC、 将屏幕包装到提供程序

定义

import React from "react";
import { Provider } from "react-redux";

...

function reduxStoreWrapper (MyComponent, store) {
    return () => {
        return class StoreWrapper extends React.Component {
            render () {
                return (
                    <Provider store={store}>
                        <MyComponent />
                    </Provider>
                );
            }
        };
    };
}

用法

Navigation.registerComponent("RouterConstants.SplashScreen", reduxStoreWrapper(SplashScreen, store))

Answer 2

首先，感谢 Pritish 提供的解决方案，但在上述解决方案的基础上，对我造成了错误：

undefined is not a function (evaluating'(0,_withReduxStoreWrapper2.default)(_LoginForm2.default, store)'

我在第二个参数中将 Navigation.registerComponent() 修改为 return 一个函数 ，而不是调用它：

export function registerScreens() {
    const store = createStore(reducers, applyMiddleware(thunk));
    Navigation.registerComponent('LoginForm', () => withReduxStoreWrapper(LoginForm, store));
}

这也是我修改的 HOC：

import React, { Component } from 'react';
import { Provider } from 'react-redux';

const withReduxStoreWrapper = (MyComponent, store) =>
    class StoreWrapper extends Component {
        render() {
            return (
                <Provider store={store}>
                    <MyComponent />
                </Provider>
            );
        }
    };

export default withReduxStoreWrapper;

Answer 3

定义 Redux store wrapper HOC

使用箭头函数的稍微更紧凑的方法：

// withReduxStoreWrapper.js
import React from 'react';
import { Provider } from 'react-redux';

const withReduxStoreWrapper = (ReduxScreen, reduxStore) => () => (props) => (
  <Provider store={reduxStore}>
    <ReduxScreen {...props} />
  </Provider>
);

export default withReduxStoreWrapper;

正在注册屏幕

然后您可以按如下方式注册屏幕：

// index.js
// ...

const registerScreens = (store) => {
  Navigation.registerComponent('MyReduxScreen', withReduxStoreWrapper(MyReduxScreen, store));
  Navigation.registerComponent('MyNormalScreen', () => MyNormalScreen);
}

const store = configureStore();
registerScreens(store);

将 react-native-navigation V2 与 redux 集成

Integrate react-native-navigation V2 with redux

react-native

react-native-navigation