React Native 错误，undefined 不是评估 'Addlistener' 的函数

Question

有什么办法可以解决这个错误吗？我发现 react-navigation 文档很难理解。

我收到这个错误：

这是我的商店：

import { createStore, applyMiddleware } from "redux";
import { createLogger } from "redux-logger";
import thunk from "redux-thunk";

import rootReducer from "../reducers";

const initialState = {
    hasErrored: false,
    isLoading: true,
    fetchEvents: {},
    fetchCategories: [],
    setCredentials: {
        setYear: 0,
        setGroup: 0,
        setStudent: 0,
        showStudent: false
    }
};

const reduxLogger = createLogger();

const store = createStore(
    rootReducer,
    initialState,
    applyMiddleware(thunk, reduxLogger)
);

export default store;

和AppNavigation

import React, { Component } from "react";
import { connect } from "react-redux";
import { BackHandler, Platform } from "react-native";

import { addNavigationHelpers } from "react-navigation";
import NavigationStack from "./navigationStack";


class AppNavigation extends Component {
  componentWillMount() {
    if (Platform.OS !== "android") return;
    BackHandler.addEventListener("hardwareBackPress", () => {
      const { navigationState, dispatch } = this.props;
      const { index } = navigationState;
      if (
        navigationState.routes[index].routeName === "Month" ||
        navigationState.routes[index].routeName === "Day"
      ) {
        dispatch({ type: "Navigation/BACK" });
        return true;
      }
      BackHandler.exitApp();
      return false;
    });
  }

  componentWillUnmount() {
    if (Platform.OS === "android")
      BackHandler.removeEventListener("hardwareBackPress");
  }

  render() {
    const { navigationState, dispatch } = this.props;
    return (
      <NavigationStack
        navigation={addNavigationHelpers({ dispatch, state: navigationState })}
      />
    );
  }
}

const mapStateToProps = state => {
  return {
    navigationState: state.navigationReducer
  };
};

export default connect(mapStateToProps)(AppNavigation);

Answer 1

因为 v1.0.0-beta.28 上的中断更改更改了 Redux 的集成方法。

按照这个document，你需要安装react-navigation-redux-helpers包

并在下面添加代码 AppNavigation

import {
  createReduxBoundAddListener,
  createReactNavigationReduxMiddleware,
} from 'react-navigation-redux-helpers';

const middleware = createReactNavigationReduxMiddleware(
  "root",
  state => state.nav,
);
const addListener = createReduxBoundAddListener("root");

并将 addListener 添加到 addNavigationHelpers

  render() {
    const { navigationState, dispatch } = this.props;
    return (
      <NavigationStack
        navigation={addNavigationHelpers({ dispatch, state: navigationState, addListener })}
      />
    );
  }

Answer 2

我正在与 "react-navigation": "^1.0.0-beta.11" 合作我这样修复

1、使用

在商店中创建中间件

import { createReactNavigationReduxMiddleware } from 'react-navigation-redux-helpers';

const middleware = createReactNavigationReduxMiddleware(
  'root',
  state => state.nav,
);

const store = createStore(
  rootReducer,
  initialState,
  compose(
    applyMiddleware(..., middleware),
  ),
);

将 addListener 添加到 addNavigationHelpers

import { createReduxBoundAddListener } from 'react-navigation-redux-helpers';

const addListener = createReduxBoundAddListener('root');

render() {
  return (
    <View>
      <MainNavigator
        ref={(nav) => { this.navigator = nav; }}
        navigation={
          addNavigationHelpers({
            dispatch: this.props.dispatch,
            state: this.props.navState,
            addListener,
          })
        }
        screenProps={{
          ...this.props,
        }}
      />
    </View>
  );
}

React Native 错误，undefined 不是评估 'Addlistener' 的函数

React Native error, undefined is not a function evaluating 'Addlistener'

react-native

react-redux

react-navigation