Блог

Это ошибка, которую я получаю

Исходный код index.js

 /** @format */

import React, { PureComponent } from "react";
import { FlatList, Text, RefreshControl, Animated, View } from "react-native";
import { PostLayout, PostBanner } from "@components";
import { Constants, Layout, withTheme, AppConfig } from "@common";
import { connect } from "react-redux";
import styles from "./styles";

const HEADER_MIN_HEIGHT = 40;
const HEADER_SCROLL_DISTANCE =
  Constants.Window.headerHeight - HEADER_MIN_HEIGHT;

@withTheme                                     <-----------here-----------
class PostList extends PureComponent {
  state = { scrollY: new Animated.Value(0) };

  constructor(props) {
    super(props);
    this.page = 1;
    this.limit = Constants.pagingLimit;
    this.isProductList = props.type === undefined;
  }

  componentDidMount() {
    this.page === 1 amp;amp; this.fetchData();
  }

  fetchData = (reload = false) => {
    if (reload) {
      this.page = 1;
    }
    if (this.isProductList) {
      this.props.initProduct();
      this.props.fetchProducts(this.limit, this.page);
    } else {
      this.props.initNews();
      this.props.fetchNews(this.limit, this.page);
    }
  };

  _handleLoadmore = () => {
    this.nextPosts();
  };

  onRowClickHandle = (item) => {
    if (this.isProductList) {
      this.props.onViewProductScreen({ product: item });
    } else {
      this.props.onViewNewsScreen({ post: item });
    }
  };

  renderItem = ({ item, index }) => {
    if (item == null) return <View />;

    let layout = null;

    if (typeof this.props.layoutHome !== "undefined") {
      layout = this.props.layoutHome;
    }

    // only use parentCard prop if it is kind of Horizontal
    if (layout == null || 
      (layout == Constants.Layout.horizon amp;amp; typeof this.props.parentLayout !== "undefined") ) {
      layout = this.props.parentLayout;
    }

    // update layout for advance mod
    if (layout === Constants.Layout.advance) {
      layout = Layout[index % Layout.length];
    }

    return (
      <PostLayout
        post={item}
        type={this.props.type}
        key={`key-${index}`}
        onViewPost={() => this.onRowClickHandle(item, this.props.type)}
        layout={layout}
        currency={this.props.currency}
      />
    );
  };

  nextPosts = () => {
    this.page  = 1;

    if (this.isProductList) {
      this.props.fetchProducts(this.limit, this.page);
    } else {
      this.props.fetchNews(this.limit, this.page);
    }
  };

  headerComponent = () => {
    const { type, headerLabel, theme: {colors: { text }} } = this.props;

    const animateOpacity = this.state.scrollY.interpolate({
      inputRange: [0, HEADER_SCROLL_DISTANCE / 2, HEADER_SCROLL_DISTANCE],
      outputRange: [1, 1, 0],
      extrapolate: "clamp",
    });

    const titleTranslate = this.state.scrollY.interpolate({
      inputRange: [0, HEADER_SCROLL_DISTANCE / 2, HEADER_SCROLL_DISTANCE],
      outputRange: [0, -50, -150],
      extrapolate: "clamp",
    });

    if (typeof headerLabel != 'undefined') {
      return (
        <View style={styles.headerLabel}>
            <View style={styles.headerLeft}>
              <Text style={[styles.tagHeader, { color: text }]}>
                {headerLabel}
              </Text>
            </View>
        </View>
      )
    }

    return (
      <PostBanner
        onViewItem={this.onRowClickHandle}
        type={type}
        animateOpacity={animateOpacity}
        animate={titleTranslate}
      />
    );
  };

  render() {
    const { list, isFetching, parentLayout } = this.props;
    const {
      theme: {
        colors: { background },
      },
    } = this.props;

    // override numColumns
    let numColumns = 1;
    let styless = {};
    
    if (typeof parentLayout != "undefined") {
      if (parentLayout == Constants.Layout.twoColumn) {
        numColumns = 2;
        styless = {}
      }
      if (parentLayout == Constants.Layout.threeColumn) {
        numColumns = 3;
        styless = {}
      } else {
        // advance layout
        styless = {flexWrap: "wrap", flexDirection: "row"};
      }
    }
    if(!this.isProductList) {
      numColumns = 3;
      styless = {};
    }

    return (
      <FlatList
        overScrollMode="never"
        style={{ backgroundColor: background }}
        contentContainerStyle={[
          styles.flatlist,
          { backgroundColor: background }, styless
        ]}
        data={list}
        key={numColumns === 1 ? "1" : (numColumns === 2 ? "2" : "3")}
        keyExtractor={(item, index) => `post_${item.id}_${index}`}
        renderItem={this.renderItem}
        scrollEventThrottle={1}
        numColumns={numColumns}

        refreshing={isFetching}
        refreshControl={
          <RefreshControl
            refreshing={isFetching}
            onRefresh={() => this.fetchData(true)}
          />
        }
        ListHeaderComponent={this.headerComponent}

        onEndReachedThreshold={10}
        onEndReached={this._handleLoadmore}
        onScroll={Animated.event([
          { nativeEvent: { contentOffset: { y: this.state.scrollY } } },
        ])}
      />
    );
  }
}

const mapStateToProps = ({ products, news, page, currency }, ownProps) => {
  const list =
    typeof ownProps.type === "undefined" ? products.listAll : news.list;
  const isFetching = products.isFetching || news.isFetching;
  const layoutHome = products.layoutHome;
  return { list, isFetching, page, currency, layoutHome };
};

const mergeProps = (stateProps, dispatchProps, ownProps) => {
  const { dispatch } = dispatchProps;
  const Product = require("@redux/ProductRedux");
  const News = require("@redux/NewsRedux");
  
  return {
    ...ownProps,
    ...stateProps,
    fetchProducts: (per_page, page) => {
      Product.actions.fetchAllProducts(dispatch, per_page, page);
    },
    fetchNews: (per_page, page) => {
      News.actions.fetchNews(dispatch, per_page, page);
    },
    initProduct: () => dispatch(Product.actions.initProduct()),
    initNews: () => dispatch(News.actions.initNews()),
  };
};

export default connect(
  mapStateToProps,
  null,
  mergeProps
)(PostList);
  

package.json

 {
  "main": "node_modules/expo/AppEntry.js",
  "scripts": {
    "start": "expo start",
    "android": "expo start --android",
    "ios": "expo start --ios",
    "web": "expo start --web",
    "eject": "expo eject"
  },
       "dependencies": {
    "@babel/plugin-proposal-decorators": "^7.12.1",
    "@react-native-community/netinfo": "4.6.0",
    "api-ecommerce": "^0.0.34",
    "babel-preset-env": "^1.7.0",
    "base-64": "0.1.0",
    "currency-formatter": "1.5.5",
    "expo": "36.0.2",
    "expo-ads-admob": "8.0.0",
    "expo-ads-facebook": "8.0.0",
    "expo-apple-authentication": "2.0.0",
    "expo-asset": "8.0.0",
    "expo-av": "8.0.0",
    "expo-constants": "8.0.0",
    "expo-facebook": "8.0.0",
    "expo-font": "8.0.0",
    "expo-linear-gradient": "8.0.0",
    "expo-web-browser": "8.0.0",
    "firebase": "7.6.1",
    "html-entities": "1.2.1",
    "lodash": "4.17.15",
    "moment": "2.24.0",
    "oauth-1.0a": "^2.2.6",
    "patch-package": "6.2.0",
    "path": "0.12.7",
    "react": "16.12.0",
    "react-instantsearch": "6.1.0",
    "react-native": "https://github.com/expo/react-native/archive/sdk-36.0.0.tar.gz",
    "react-native-animatable": "1.3.3",
    "react-native-app-intro-slider": "3.0.0",
    "react-native-clean-form": "0.5.0",
    "react-native-collapsible": "1.5.1",
    "react-native-country-picker-modal": "1.9.8",
    "react-native-drawer": "https://github.com/luyx2412/react-native-drawer.git",
    "react-native-fluid-slider": "1.0.2",
    "react-native-gesture-handler": "~1.5.0",
    "react-native-image-zoom-viewer": "2.2.27",
    "react-native-keyboard-aware-scroll-view": "0.9.1",
    "react-native-masked-text": "1.13.0",
    "react-native-modalbox": "2.0.0",
    "react-native-paper": "3.4.0",
    "react-native-parallax": "0.3.0",
    "react-native-radio-buttons": "1.0.0",
    "react-native-reanimated": "~1.4.0",
    "react-native-render-html": "4.1.2",
    "react-native-restart": "0.0.13",
    "react-native-screens": "2.0.0-alpha.12",
    "react-native-scrollable-tab-view": "1.0.0",
    "react-native-side-menu": "1.1.3",
    "react-native-snap-carousel": "3.8.4",
    "react-native-star-rating": "1.1.0",
    "react-native-swipe-list-view": "2.1.2",
    "react-native-swiper": "^1.6.0-nightly.5",
    "react-native-webview": "8.0.1",
    "react-navigation": "^4.0.10",
    "react-navigation-header-buttons": "3.0.4",
    "react-navigation-props-mapper": "1.0.1",
    "react-navigation-stack": "^1.10.3",
    "react-navigation-tabs": "^2.6.2",
    "react-redux": "7.1.3",
    "redux": "4.0.5",
    "redux-actions": "2.6.5",
    "redux-persist": "^5.9.1",
    "redux-thunk": "2.3.0",
    "reselect": "4.0.0",
    "tcomb-form-native": "0.6.20",
    "urijs": "1.19.2",
    "url": "0.11.0",
    "url-parse": "1.4.7",
    "util": "0.12.1",
    "uuid": "3.3.3",
    "validate.js": "0.13.1",
    "wpapi": "^1.2.1"
  },
  "devDependencies": {
    "babel-jest": "24.9.0",
    "babel-plugin-transform-remove-console": "6.9.4",
    "babel-preset-expo": "8.0.0",
    "babel-preset-react-native": "4.0.1",
    "jest": "24.9.0",
    "reactotron-react-native": "3.6.4",
    "reactotron-redux": "3.1.1"
  }
}
  

Это задокументировано на странице babel здесь https://babeljs.io/docs/en/babel-plugin-proposal-decorators .

Я попытался запустить: yarn add @babel / plugin-proposal-decorators

но я все еще получаю ту же ошибку, я не знаю, синтаксическая ли это ошибка, но каждый раз, когда я ее запускаю, я получаю эту ошибку, вы можете мне помочь, спасибо!