0

我正在使用和创建一个反应本机应用create-react-native-app程序。我正在尝试将与 redux 连接的组件作为屏幕添加到嵌套中（尽管嵌套似乎没有任何区别，但无论哪种方式都不起作用），并且始终收到一条错误消息说. 当我从文件中删除 redux 连接时，一切正常。知道如何让它工作吗？react-navigationreact-reduxStackNavigatorRoute 'MilkStash' should declare a screenMilkStash.js

应用程序.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);

减奶器.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;

减速器.js

export * from './milk.js';

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

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

1 回答 1

2

我想出了答案，并认为我会帮助防止其他人为此苦苦挣扎 3 天。这个问题与我从MilkStash.js. 显然使用import MilkStash from './screens'会导致错误，但将其更改为import MilkStashContainer from './screens/MilkStash/MilkStash.js将解决问题。

于 2017-08-22T22:01:34.747 回答