带Redux的Expo React Native：路由的组件必须是react组件

Question

我在Expo上将React Active与Redux一起使用，并试图在Android上运行我的项目并出现以下错误： enter image description here

版本： 博览会：36.0.0 反应：16.9.0 React-Native：36.0.0 SDK Redux：4.0.2

React-Redux：5.1.1

App.js

import React, { Component } from 'react';
import { StyleSheet, Text, View } from 'react-native';
import { Provider } from 'react-redux';
// import Store from './src/redux/Store';
import configureStore from './src/redux/Store';
import AppNavigator from './src/navigation/AppNavigator'

const store = configureStore();

export default function App() {
  return (
    <Provider store={store}>
      <AppNavigator></AppNavigator>
    </Provider>
  );
}

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

=========================================== >

AppNavigation.js

import React from 'react';
import { createStackNavigator } from 'react-navigation-stack';

import Products from '../screens/Products';
import Checkout from '../screens/Checkout';
import Receipt from '../screens/Receipt';

import themes from '../styles/theme.style';

const AppNavigator = createStackNavigator({
        Products: {
            screens: Products
        },
        Checkout: {
            screens: Checkout
        },
        Receipt: {
            screens: Receipt
        }
    }, {
        navigationOptions: {
            headerStyles: {
                backgroundColor: themes.BACKGROUND_COLOR,
                paddingHorizontal: 10,
            },
            headerTintColor: '#fff'
        }
    }
);

export default AppNavigator;

================================================ =========

Product.js

import React, { Component } from 'react';
import { View, Text, FlatList, StyleSheet } from 'react-native';
import { connect } from 'react-redux';

import  Product  from '../components/Product';
import { addToCart } from '../redux/actions/CartActions';
import { fetchProducts } from '../redux/actions/ProductAction';
import Logo from '../components/Logo';
import Cart from '../components/Cart';

class Products extends React.Component {
  static navigationOptions = ({navigation}) => {
    return {
      headerTitle: 'Products',
      headerLeft: <Logo navigation={navigation}/>,
      headerRight: <Cart navigation={navigation}/>
    }
  }
  constructor(props) {
      super(props);
  }
  componentWillMount = () => {
    this.props.fetchProducts();
  }
  addItemsToCart = (product) => {
      this.props.addToCart(product);
  }
  render() {
    const { products, navigation } = this.props
    return (
        <View style={styles.container}>

        <View style={styles.body}>
          <FlatList 
          data={products} 
          renderItem={({item}) => <Product item={item} addItemsToCart={this.addItemsToCart} product={item}/>}
          keyExtractor ={(item) => item.id}
          ItemSeparatorComponent= {()=> <View style={{height:0.5, backgroundColor:'#34495e90'}}/> }/>
        </View>
      </View>

    );
  }
}
const styles = StyleSheet.create({
    container: {
        flex: 1
    },
    body: {
      flex: 1,
      justifyContent: 'center'
    }
});
const mapStateToProps = (state) => ({
    products: state.products.items
})
export default connect(mapStateToProps, {addToCart,fetchProducts})(Products);

我不知道这里的wat是错的，我尝试了多种选择，但没有运气。任何建议将不胜感激。

运行命令： expo-cli start

Answer 1

检查要从哪里导入。

从“反应导航/堆栈”导入{createStackNavigator};