私が作成反応し、ネイティブ・を使用していますネイティブ反応し、私が反応し、ナビゲーションとReduxの統合</p> <p>で問題に直面しています反応し、ナビゲーションReduxのエラーは現在、私は、に取り組んでいます未定義

Question

をthis.props.navigation.state.indexアプリのアプリ

次のエラーが発生しています。

この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, 

}); 

私は何が欠けているのか分かりません。どのようにあなたが行動を派遣している、また

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; 

：

Answer 1

はあなたのようNavigation.jsを変更してみてください？

PS：ここでは円滑な還元と反応ナビゲーションの統合が役立つ記事を書いています。 React-Navigation and Redux