将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))