React native, React Navigation integration issue u

问题:

So I've been follow this tutorial and adapting for what I need.

I've checked the other answer but can't quite make out what I'm missing?

For the search engines, the error is: undefined is not an object, router, 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>
        )
    }

}

ReduxNavigation:

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

回答1:

So the answer actually rather simple in the App.js you need to build the navReducer from plain navigation component rather than Redux one. Thanks to benneygennel for helping through comments! So this:

const navReducer = (state, action) => {

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

Becomes:

const navReducer = (state, action) => {

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