将 react-native-navigation V2 与 redux 集成答案

【问题标题】：Integrate react-native-navigation V2 with redux将 react-native-navigation V2 与 redux 集成
【发布时间】：2018-04-18 12:05:24
【问题描述】：

在 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

【问题讨论】：

你能添加导航设置和商店的代码吗？
理想情况下它应该是文本，而不是图像，但总比没有好。现在，我在 SO 上找到了很多关于该错误中的术语的结果。你看到他们中的任何一个了吗？如果是这样，他们是否也不能解决您的问题？如果不是，那么正如 Pritish 所说，您应该发布理解错误所需的完整代码，因为我们不知道这些变量是什么仅仅通过查看那 1 行。
@underscore_d 我刚刚添加了一些代码
我收到类似“应用程序尚未注册”的错误。

标签： react-native react-native-navigation

【解决方案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))

【讨论】：

嗨，有人遇到这个错误吗？ - undefined 不是函数（评估'(0,_reduxStoreWrapper2.default)(_LoginForm2.default, store)'）
如果您可以针对该问题发布一个带有相关详细信息的问题，以便用户能够清楚地识别问题，那就太好了。谢谢
如果我必须注册 3 个屏幕怎么办？我应该创建 3 个 function reduxStoreWrapper... 吗？

【解决方案2】：

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

undefined 不是函数（评估'(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;

【讨论】：

【解决方案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);

【讨论】：