StackNavigatorでredux-connectedコンポーネントを画面として使用

Question

create-react-native-app,react-navigationおよびreact-reduxを使用して反応ネイティブアプリを作成しています。私はredux接続されたコンポーネントをネストされたStackNavigatorに画面として追加しようとしています（ネストは違いはないようですが、いずれも動作しません）。そして、一貫してRoute 'MilkStash' should declare a screenというエラーメッセージが表示されます。 MilkStash.jsファイルからredux接続を削除すると、すべて正常に動作します。どのようにこれを動作させるためにどのようなアイデア？

App.js

import React, { Component } from 'react'; 
import { StyleSheet, Text, View } from 'react-native'; 
import { Provider } from 'react-redux'; 
import { createStore } from 'redux'; 
import rootReducer from './src/reducers'; 
import AppWithNavigation from './src/AppWithNavigation'; 

export default() => (
    <Provider store = {createStore(rootReducer)}> 
    <AppWithNavigation /> 
    </Provider> 
); 

AppWithNavigation.js

import React, { Component } from 'react'; 
import { connect } from 'react-redux'; 
import { StyleSheet, Text, View, Image, Button } from 'react-native'; 
import { DrawerNavigator, StackNavigator } from 'react-navigation'; 
import MilkStash from './screens' 
import { StatsScreen, FAQScreen, AddMilk, AccountScreen } from './screens'; 

export default class AppWithNavigation extends React.Component { 

    render() { 
    return (
     <MenuNavigator /> 
    ); 
    } 
} 

const MilkNavigator = StackNavigator(
    { Milk: { screen: MilkStash}, 
    AddMilk: { screen: AddMilk } 
    }, 
); 

const AccountNavigator = StackNavigator(
    { Account: {screen: AccountScreen}} 
); 

const StatsNavigator = StackNavigator(
    { Stats: {screen: StatsScreen }} 
); 

const FAQNavigator = StackNavigator(
    { FAQ: {screen: FAQScreen}} 
) 

const MenuNavigator = DrawerNavigator({ 
    Milk: { screen: MilkNavigator}, 
    Account: {screen: AccountNavigator}, 
    Stats: {screen: StatsNavigator}, 
    FAQ: {screen: FAQNavigator}, 
    } 
); 

const styles = StyleSheet.create({ 
    container: { 
    flex: 1, 
    justifyContent: 'center', 
    backgroundColor: '#ecf0f1', 
    } 
}); 

MilkStash.js

import React, {Component} from 'react'; 
import { StyleSheet, Text, View} from 'react-native'; 
import { StackNavigator } from 'react-navigation'; 
import { connect } from 'react-redux'; 
import { Milk } from '../../core/models/milk'; 
import styles from './styles.js'; 

export class MilkStash extends Component { 
    constructor(props){ 
    super(props); 
    } 

    render() { 
    return (
     <View style={styles.container}> 
      ....displaying data goes here 
     </View> 
    ) 
    } 
} 

function mapStateToProps(state){ 
    return{ 
    milkStash: state.milkStash 
    } 
} 

function mapDispatchToProps(dispatch){ 
    return { 
    addMilk: (milk) => dispatch(addMilk(milk)), 
    } 
} 

export default connect(mapStateToProps, mapDispatchToProps)(MilkStash); 

ミルクreducer.js

import {ADD_MILK} from '../constants'; 

const milkReducer = (state = {milkStash: []}, action = {}) => { 
    switch(action.type){ 
    case ADD_MILK: 
     var item = action.payload; 
     return state 
     .update('milkStash', (milkStash) => 
      { 
       var milkStashCopy = JSON.parse(JSON.stringify(milkStash)); 
       milkStashCopy.concat(item); 
       return milkStashCopy; 

      }); 
    default: 
     return state; 
    } 
} 
export default milkReducer; 

reducers.js

export * from './milk.js'; 

import milkReducer from './milk'; 
import { combineReducers } from 'redux'; 

export default rootReducer = combineReducers({ 
    milk: milkReducer 
}); 

Answer 1

私は答えを考え出したと私は3日間これで苦労して他の誰かを防ぐのに役立つだろうと思いました。問題は、私がMilkStash.jsから輸出品を輸入していた方法と関係がありました。明らかにimport MilkStash from './screens'を使用するとエラーが発生しますが、それをimport MilkStashContainer from './screens/MilkStash/MilkStash.jsに変更すると問題が解決されます。