Expo React Native с избыточным кодом: компонент маршрута должен быть компонентом реакции

Question

Я использую React Active с Redux на Экспо и пытался запустить свой проект на Android и получаю ошибку ниже: введите описание изображения здесь

Версии: Экспо: 36.0. 0 React: 16.9.0 React-Native: 36.0.0 SDK Redux: 4.0.2

React-Redux: 5.1.1

Приложение. 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;

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

Продукт. 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);

Я не знаю, ват это неправильно здесь, я пробовал с несколькими вариантами, но не повезло. Будем благодарны за любые предложения.

Команда запуска: expo-cli start

Answer 1

Проверьте, откуда вы импортируете.

import {createStackNavigator} из'act-navigation / stack ';