React native，React Navigation集成问题undefined不是getStateForAction对象

Question

所以我一直在关注this教程并根据我的需要进行调整。

我检查了另一个答案，但不能完全弄清楚我错过了什么？

对于搜索引擎，错误是：undefined不是对象，路由器，getStateForAction

App.js

import React, {Component} from 'react';
import {createStore, combineReducers, applyMiddleware} from 'redux'
import {Provider, connect} from 'react-redux'
import reducers from './reducers'
import {View} from 'react-native'


import ReduxNavigation from './components/Navigation/ReduxNavigation'

const initialState = ReduxNavigation.router.getStateForAction(ReduxNavigation.router.getActionForPathAndParams('AddItems'));

const navReducer = (state = initialState, action) => {

    const newState = ReduxNavigation.router.getStateForAction(action, state)
    return newState || state
}

const store = createStore(
    combineReducers({
        ...reducers,
        nav: navReducer,
    })
)

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

}

Redux导航：

import React from 'react'
import * as ReactNavigation from 'react-navigation'
import { connect } from 'react-redux'
import PrimaryNav from './PrimaryNav'

// here is our redux-aware our smart component
function ReduxNavigation (props) {
    const { dispatch, nav } = props
    const navigation = ReactNavigation.addNavigationHelpers({
        dispatch,
        state: nav
    })

    return <PrimaryNav navigation={navigation} />
}

const mapStateToProps = state => ({ nav: state.nav })
export default connect(mapStateToProps)(ReduxNavigation)

PrimaryNav：

import React from 'react'
import {StackNavigator, DrawerNavigator} from 'react-navigation'
import AddItemsWrapper from '../AddItemsWrapper'
import {Text} from 'react-native'

const noTransitionConfig = () => ({
    transitionSpec: {
        duration: 0,
        timing: Animated.timing,
        easing: Easing.step0
    }
})

const DrawerStack = DrawerNavigator({
    screen: {screen: AddItemsWrapper}
}, {
    gesturesEnabled: false,
})

const drawerButton = (navigation) =>
    <Text
        style={{padding: 5, color: 'white'}}
        onPress={() => {
            // Coming soon: navigation.navigate('DrawerToggle')
            // https://github.com/react-community/react-navigation/pull/2492
            if (navigation.state.index === 0) {
                navigation.navigate('DrawerOpen')
            } else {
                navigation.navigate('DrawerClose')
            }
        }
        }>Menu</Text>

const DrawerNavigation = StackNavigator({
    DrawerStack: {screen: DrawerStack}
}, {
    headerMode: 'float',
    navigationOptions: ({navigation}) => ({
        headerStyle: {backgroundColor: '#4C3E54'},
        title: 'Welcome!',
        headerTintColor: 'white',
        gesturesEnabled: false,
        headerLeft: drawerButton(navigation)
    })
})

// Manifest of possible screens
const PrimaryNav = StackNavigator({
    drawerStack: { screen: DrawerNavigation }
}, {
    // Default config for all screens
    headerMode: 'none',
    title: 'Main',
    initialRouteName: 'loginStack',
    transitionConfig: noTransitionConfig
})

export default PrimaryNav

Answer 1

所以在App.js中答案实际上相当简单，你需要从普通导航组件而不是Redux构建navReducer。感谢benneygennel帮助评论！所以这：

const navReducer = (state, action) => {

    const newState = ReduxNavigation.router.getStateForAction(action, state)
    return newState || state
}

变为：

const navReducer = (state, action) => {

    const newState = PrimaryNav.router.getStateForAction(action, state)
    return newState || state
}