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会解决问题。

在StackNavigator中使用redux连接组件作为屏幕

1 个答案: