Question

我正在使用redux与redux进行反应导航，在redux集成之后，我在抽屉关闭时遇到了一些错误。

import React from "react";
. . .
import { NavigationActions } from "react-navigation";
import { StackNavigator, DrawerNavigator } from 'react-navigation';

import { addListener } from "./components/common/utils";
import Dashboard from './components/pages/Dashboard';
. . .
const MainNavigator = StackNavigator({
  Dashboard : {
    screen : Dashboard,
  },
  . . .
})

export const AppNavigator = DrawerNavigator(
  {
    Main: { screen: MainNavigator }
  }, {
    contentComponent: Menu,
    drawerWidth: 300,
    headerMode: 'screen',
    drawerPosition: 'left',
    drawerOpenRoute: 'DrawerOpen',
    drawerCloseRoute: 'DrawerClose',
    drawerToggleRoute: 'DrawerToggle',
  }
)

class AppWithNavigationState extends React.Component {
  constructor (props) {
    super(props)
    this.onBackPress = this.onBackPress.bind(this)
  }

  componentDidMount () {
    BackHandler.addEventListener('hardwareBackPress', this.onBackPress)
  }

  componentWillUnmount () {
    BackHandler.removeEventListener('hardwareBackPress', this.onBackPress)
  }

  onBackPress () {
    ...
  }

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

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

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

export default connect(mapStateToProps)(AppWithNavigationState);

这是我的减速机：

import { fromJS } from 'immutable';
import { NavigationActions } from "react-navigation";
import { combineReducers } from "redux";

import { AppNavigator } from "../../App";
import {...} from './constants';
import { ToastAndroid } from 'react-native';

const mainAction = AppNavigator.router.getActionForPathAndParams('Main');
const initialNavState = AppNavigator.router.getStateForAction(mainAction);

function nav(state = initialNavState, action) {
  let nextState;
  switch (action.type) {
    case 'Reports':
      nextState = AppNavigator.router.getStateForAction(
        NavigationActions.back(),
        state
      );
      break;
    default:
      nextState = AppNavigator.router.getStateForAction(action, state);
      break;
  }
  return nextState || state;
}

const initialState = fromJS({
  isLoading: true,
  ...
});

function store(state = initialState, action) {
  switch (action.type) {
    case SET_IS_LOADING:
      return state.set('isLoading', action.value);
      ...
    default:
      return state;
  }
}

const AppReducer = combineReducers({
  nav,
  store,
});

export default AppReducer;

和文件我叫DraweOpen：

import React from "react";
import PropTypes from "prop-types";
import { TouchableOpacity } from "react-native";
import { createStructuredSelector } from 'reselect';
import { connect } from 'react-redux';
import { bindActionCreators } from 'redux';

import Icon from "react-native-vector-icons/dist/MaterialIcons";
import { DrawerBurger } from "../common/styles";
import { navigate } from "../store/actions";

const drawerButton = (props) => (
  <DrawerBurger>
    <TouchableOpacity 
      onPress={() => props.navigate("DrawerOpen")}
    >
      <Icon name="menu" size={30} color="white" />
    </TouchableOpacity>
  </DrawerBurger>
);

drawerButton.propTypes = {
  navigate: PropTypes.func.isRequired,
};

const mapStateToProps = createStructuredSelector({});

const mapDispatchToProps = dispatch => (
  (
    bindActionCreators({
      navigate,
    }, dispatch)
  )
);

export default connect(mapStateToProps, mapDispatchToProps)(drawerButton);

我在导航选项上调用了drawerButton组件，如：

...
class Dashboard extends Component {
  static navigationOptions = () => ({
    headerTitle: <Header dashboard />,
    headerStyle: { backgroundColor: '#2c4e0f' },
    headerLeft: <DrawerButton />,
  });
...

我按照reactnavigation.org上的说明，也阅读了一些示例代码来构建导航器。

实际上在redux集成之前没有错误，导航器结构与BackHandling相同。

这是我的行动.js：

import { NavigationActions } from "react-navigation";
import {...} from './constants';

...
export const navigate = routeName => NavigationActions.navigate({ routeName });

我的环境是：

react-navigation：1.5.11
react-native：0.53.0
react-navigation-redux-helpers：1.0.5
react-redux：5.0.7
redux：3.7.2
node：8.9.4
npm：5.6.0

感谢您的帮助。

Answer 1

根据redux整合docs，您似乎错过了一步。

您需要从 React Navigation

添加addNavigationHelpers

<强>用法

import {addNavigationHelpers} from 'react-navigation';

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

使用Redux进行反应导航 - 抽屉关闭错误

1 个答案: