0

So habe ich this Tutorial folgen und anpassen für was ich brauche.Reagieren native, Reagieren Navigation Integrationsproblem undefined ist kein Objekt getStateForAction

Ich habe die andere Antwort überprüft, kann aber nicht genau ausmachen, was ich vermisse?

Für den Suchmaschinen ist der Fehler: nicht definiert ist kein Objekt, Router, getStateForAction

enter image description here

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) 

PrimäreNav:

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

wilde Vermutung. Können Sie 'View' aus dem App-Klassen-Render entfernen und die' ReduxNavigation' direkt unter 'Provider' setzen? – bennygenel

+0

Ja, fertig! Kein Einfluss. –

+1

In react-navigation docs gibt es eine 'initialState'-Erstellung. Vielleicht weil du es vermisst. Bitte überprüfen Sie [diese] (https://reactnavigation.org/docs/guides/redux#Redux-Integration). – bennygenel

Antwort

1

Also die Antwort eigentlich ziemlich einfach in der App.js müssen Sie den navReducer von Plain Navigationskomponente statt Redux One bauen. Danke an benneygennel für die Hilfe bei den Kommentaren! So folgt aus:

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 
} 
Verwandte Themen