将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提供的解决方案，但在上述解决方案的基础上，对我造成了错误：

  

未定义不是函数（评估'（0，_withReduxStoreWrapper2.default）（_ LoginForm2.default，store）'

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

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商店包装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);