React native router flux：TypeError：undefined不是函数（评估＆＃39; addListener＆＃39;）

Question

我正在使用这个主要依赖项处理react本机应用程序：

• 反应原生
• 反应原生路由器通量
• 反应thunk
• 博览会

我正在使用这个package.json：

"dependencies": {
    "expo": "23.0.4",
    "humps": "^2.0.0",
    "install": "^0.10.1",
    "lodash": "^4.17.4",
    "native-base": "^2.3.5",
    "react": "16.0.0",
    "react-native": "0.50.4",
    "react-native-extend-indicator": "^0.1.2",
    "react-native-keyboard-aware-scroll-view": "^0.4.2",
    "react-native-maps": "^0.19.0",
    "react-native-maps-directions": "^1.3.0",
    "react-native-modal-datetime-picker": "^4.13.0",
    "react-native-qrcode": "^0.2.6",
    "react-native-router-flux": "4.0.0-beta.24",
    "react-native-svg-uri": "^1.2.3",
    "react-native-swiper": "^1.5.13",
    "react-native-vector-icons": "^4.4.2",
    "react-navigation-redux-debouncer": "^0.0.2",
    "react-redux": "^5.0.6",
    "redux": "^3.7.2",
    "redux-logger": "^3.0.6",
    "redux-thunk": "^2.2.0",
    "swagger-client": "2.1.32"
  }

应用程序正在使用expo，所以我使用：

安装依赖项

• 纱线安装

然后按

运行应用

• yarn start --reset-cache

我工作正常，因为我想添加一个新的依赖项，所以我删除了node_modules文件夹和yarn.lock文件，添加了新的依赖项并再次执行yarn install。

之后，我在打开应用程序时遇到此错误：

  

TypeError：undefined不是函数（评估＆＃39; addListener＆＃39;）

它与react-navigation有关，但我使用的是react-native-router-flux 4.0.0-beta.24，它在内部使用react-navigation ^ 1.0.0-beta.19。

我最近注意到使用反应导航的人对此有一些麻烦（https://github.com/react-navigation/react-navigation/issues/3416），但使用的是beta.28版本。

如果我回到之前的node_modules文件夹（来自垃圾箱），我的应用程序运行良好，所以..可能是因为我的package.json的 ^ 符号的某些依赖关系是no更兼容..也许thunk或反应本机路由器与我的本机版本反应。

任何想法？

当我使用react thunk中间件时，这是代码的一部分：

import {applyMiddleware, compose, createStore} from 'redux';
import thunkMiddleware from 'redux-thunk';
import {createLogger} from 'redux-logger';
import getRootReducer from "../reducers/index";
import navigationDebouncer from 'react-navigation-redux-debouncer';
import {restApi} from "../lib/restApi";

const loggerMiddleware = createLogger({ predicate: (getState, action) => __DEV__  });

export default function getStore(initialState) {
    const enhancer = compose(
        applyMiddleware(
            thunkMiddleware.withExtraArgument(restApi),
            navigationDebouncer(600),
            loggerMiddleware
        ),
    );
    return createStore(
        getRootReducer,
        initialState,
        enhancer
    );
}

这是主应用程序：

import React, {Component} from 'react';
import {Provider} from 'react-redux'
import getStore from './src/store/configureStore'
import {StatusBar} from 'react-native'
import AppNavigation from './src/navigation';

const Store = getStore();

export default class App extends Component {

    constructor(props) {
        super(props);
    }

    async componentWillMount() {
        await Expo.Font.loadAsync({
            'Ionicons': require('native-base/Fonts/Ionicons.ttf'),
        });
    }

    render() {
        StatusBar.setHidden(true);
        return (
            <Provider store={Store}>
                <AppNavigation/>
            </Provider>
        );
    }
}

编辑：我发现现在react-native-router-flux使用1.0.0 react-navigation（新的稳定版本），之后使用的是1.0.0-beta.27版本。该应用程序适用于测试版，但1.0.0版本存在此问题...... 所以我认为你在上一个版本中使用固定版本的反应导航（1.0.0-22.beta）

所以问题是，有没有办法仍然使用RNRF 4.0.0-beta.24 BUT使用固定版本（例如1.0.0-27.beta）？

我的意思是，我认为4.0.0-beta.24使用^ 1.0.0-beta19（这将导致安装最后的1.0.0版本）和4.0版本的新版本。 0-beta.28使用固定的较低版本（1.0.0-beta.22）

Answer 1

所以经过一些研究和一些测试后我想回答我的问题。

问题在于内部处理的 react-navigation 依赖关系 react-native-router-flux

依赖关系是：

react-native-router-flux beta.0 - beta.24 -> react-navigation ^1.0.0-beta.19
react-native-router-flux beta.25 - beta.28 -> react-navigation 1.0.0-beta.22

这里的最大区别是0到beta24的版本使用 ^

那么......问题是什么？

安装依赖项时，beta24会搜索自1.0.0-beta.19以来最新版本的react-navigation，该版本是最新的1.0版本反应导航版本（该库不再是beta版本）。

react-native-router-flux不提供对该依赖的支持。它既不提供对其他olders依赖的支持，所以他们只是将 1.0.0-beta22 react-navigation依赖修复到他们最新的发行版package.json上（因为beta版） 26）。

可能他们会修复它，因为有很多应用程序使用redux或其他库与react-native-router-flux没有很好的交互。

所以现在.. Redux用户的解决方案是针对beta26版本的，对于那些不使用redux的人来说可能是beta27和beta28就可以了。

以下是讨论：https://github.com/aksonov/react-native-router-flux/issues/2865

以下是另一个相关问题：https://github.com/aksonov/react-native-router-flux/issues/2799