反应导航 redux 错误 this.props.navigation.state.index 未定义

Question

目前我正在研究 React Native，我面临着 React-Navigation 和 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 集成，这可能会有所帮助。 React-Navigation and Redux

反应导航 redux 错误 this.props.navigation.state.index 未定义

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

react-native

redux

react-navigation