在StackNavigator中使用連接成分的組件作爲屏幕

我使用create-react-native-app,react-navigation和react-redux創建反應原生應用程序。我試圖將一個連接REDX的組件作爲一個屏幕添加到一個嵌套的StackNavigator（雖然嵌套似乎沒有什麼區別，但它不起作用），並且始終在收到一條錯誤消息Route 'MilkStash' should declare a screen。當我從MilkStash.js文件中刪除了redux連接時，一切正常。任何想法如何得到這個工作？在StackNavigator中使用連接成分的組件作爲屏幕

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 
});

來源

2017-08-21 J. Brandes

我想出了答案，我想我將有助於防止別人用這種掙扎3天。這個問題與我從MilkStash.js導入出口的方式有關。顯然使用import MilkStash from './screens'會導致錯誤，但將其更改爲import MilkStashContainer from './screens/MilkStash/MilkStash.js將解決該問題。

來源

2017-08-22 22:01:34

在StackNavigator中使用連接成分的組件作爲屏幕

回答

相關問題