首页 > 解决方案 > createReduxBoundAddListener 在 react-navigation-redux-helpers@2.0.0 中已弃用!请改用 reduxifyNavigator

问题描述

我正在使用 react-navigation 和 redux 在屏幕之间进行导航,但我却遇到了错误。

不变违规:createReduxBoundAddListener 在 react-navigation-redux-helpers@2.0.0 中已弃用!请使用 reduxifyNavigator

我不知道如何解决它,请帮助我。

应用程序.js

 import React from 'react';
 import { Provider } from "react-redux";
 import store from "./src/redux/store"      
 import { createReduxBoundAddListener } from "react- navigation-redux-helpers";
 import AppWithNavigationState from "./src/navigators/AppNavigator";

export default class App extends React.Component {
 render() {
  return (
   <Provider store={store}>

      //Here Im getting an error regarding creacteReduxBoundAddListener

     <AppWithNavigationState listener{createReduxBoundAddListener("root")}/>
   </Provider>
  );
 }
}

AppNavigator.js 文件

import React, { Component } from 'react';
import { View, Text } from 'react-native';
import {connect} from "react-redux";
import {PropTypes} from 'prop-types';
import {addNavigationHelpers,createStackNavigator } from "react-navigation";
import LoggedOut from "../screens/LoggedOut";
import LogIn from "../screens/Login";
import ForgotPassword from "../screens/ForgotPassword";

// created screens using createStackNavigator

export const AppNavigator = createStackNavigator({
  LoggedOut:{screen:LoggedOut},
  LogIn:{screen:LogIn},
  ForgotPassword:{screen:ForgotPassword},

});

const AppWithNavigationState = ({ dispatch,nav,listener}) =>{
  <AppNavigator navigation= 
  {addNavigationHelpers({dispatch,state:nav,addListener:listener})}/>
};

AppWithNavigationState.propTypes = {
  dispatch:PropTypes.func.isRequired,
  nav:PropTypes.object.isRequired
};

const mapStateToProps = state =>({
  nav:state.nav,
});

export default connect(mapStateToProps)(AppWithNavigationState);

导航.js

import {AppNavigator} from "../../navigators/AppNavigator";


const firstAction = 
AppNavigator.router.getActionForPathAndParams("LoggedOut");  //decide which 
                                                             //screen will 
                                                             //load first

const initialNavState = AppNavigator.router.getStateForAction(firstAction);

export const nav = (state=initialNavState, action)=>{
  let nextState = AppNavigator.router.getStateForAction(action,state);
  return nextState || state;
}

标签: react-nativereduxreact-navigation

解决方案


你可以查看这个 repo https://github.com/JaiDeves/AirBnB-React,我已经用新版本的 react-navigation 更新了代码。


推荐阅读