react-navigation redux error this.props.navigation.state.index undefined

Question

目前我正在研究本地反应，我面临反应导航和redux集成的问题

我正在为应用程序使用create-react-native-app

我收到以下错误。

我见过这个https://github.com/react-community/react-navigation/issues/261，但我无法弄清楚设置中的确切问题。

请让我知道我在设置中缺少的其他内容

我的App.js

import React, { Component } from 'react';
import * as Expo from "expo";
import { Provider, connect } from 'react-redux';
import store from "./store";
import AppNavigator from './Navigation';
import { addNavigationHelpers } from 'react-navigation';

class Root extends React.Component {
    render() {
        return (
            <AppNavigator navigation={addNavigationHelpers({
                dispatch: this.props.dispatch,
                state: this.props.nav,
            })} />
        );
    }
}

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

const AppWithNavigationState = connect(mapStateToProps)(Root);

export default class App extends Component {

    constructor(props) {
        super(props);
        this.state = { isLoading: true};
    }

    componentWillMount() {
        this.loadFonts();
    }

    async loadFonts() {
        await Expo.Font.loadAsync({
            Roboto_medium: require("native-base/Fonts/Roboto_medium.ttf")
        });
        this.setState({ isLoading: false });
    }

    render() {
        if (this.state.isLoading) {
            return <Expo.AppLoading />;
        } else
            return (
                <Provider store={store}>
                   <AppWithNavigationState/>
                </Provider>
            );

    }
}

我的Navigation.js

import Home from './components/user/Home';
import Auth from "./components/user/Auth";
import React from 'react';
import { StackNavigator } from 'react-navigation';

const AppNavigator = StackNavigator(
    {
        Auth: { screen: Auth },
        Home: { screen: Home }
    },
    {
        initialRouteName: "Auth",
        headerMode: "none"
    }
);

const initialState = {
    index: 0,
    routes: [
        { key: 'Auth', routeName: 'Auth' },
    ],
};

export const navReducer = (state = initialState, action) => {
    const nextState = AppNavigator.router.getStateForAction(action, state);
    return nextState || state;
};

export default AppNavigator;

我在联合减速器中使用过它，比如

export default combineReducers({
    nav: navReducer,

});

我不知道我错过了什么。

Answer 1

尝试将Navigation.js更改为：

import Home from './components/user/Home';
import Auth from "./components/user/Auth";
import React from 'react';
import { StackNavigator } from 'react-navigation';

const AppNavigator = StackNavigator(
    {
        Auth: { screen: Auth },
        Home: { screen: Home }
    },
    {
        initialRouteName: "Auth",
        headerMode: "none"
    }
);

const initialState = AppNavigator.router.getStateForAction(AppNavigator.router.getActionForPathAndParams('Auth'));

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

export default AppNavigator;

另外，你如何调度行动？

PS：我在这里写了一篇关于平滑redux和反应导航集成的文章，这可能会有所帮助。的 React-Navigation and Redux