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),
  ),
);

1. 将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>
  );
}