Как исправить поддержку экспериментального синтаксиса 'decorators-legacy' в настоящее время не включена ошибка в react native expo
Я пытаюсь запустить свое приложение react native
ОшибкаЦитата:Это ошибка, которую я получаю, когда запускаю"npm start" на cmd
Expo Press ? to show a list of all available commands.
SyntaxError: F:\PROJECT ONE\apptest-expo\src\components\PostList\index.js: Support for the experimental syntax 'decorators-legacy' isn't currently enabled (14:1):
12 | Constants.Window.headerHeight - HEADER_MIN_HEIGHT;
13 |
> 14 | @withTheme
| ^
15 | class PostList extends PureComponent {
16 | state = { scrollY: new Animated.Value(0) };
17 |
Failed building JavaScript bundle.
Исходный код программы 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 && 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 && 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);
пакет.в JSONпакет.в JSON<pre lang="Javascript">{
"главная": "node_modules/expo/AppEntry.js",
"файлы сценариев": {
"пуск": "пуск ЭКСПО ",
"android": "expo start --android",
"МО": "старт ЭКСПО --Иос",
"паутина": "ЭКСПО пуск --веб",
"выталкивающая": "выталкивающая ЭКСПО "
},
"зависимости": {
"@Бабеля/плагин-предложение-декораторы": "^7.12.1",
"@реагировать родной-сообщество/партнеры": "4.6.0",
"api-электронная коммерция": "^0.0.34",
"Бабель-предустановки-ОКР": "^1.7.0",
"база-64": "0.1.0",
"валюта-форматер": "1.5.5",
"ЭКСПО": "36.0.2",
"ЭКСПО-Реклама-Сервис AdMob": "8.0.0",
"expo-ads-facebook": "8.0.0",
"ЭКСПО-яблоко-проверки подлинности": "2.0.0",
"ЭКСПО-актив": "8.0.0",
"ЭКСПО-АВ": "8.0.0",
"ЭКСПО-константы": "8.0.0",
"expo-facebook": "8.0.0",
"ЭКСПО-стиль": "8.0.0",
"ЭКСПО-линейный-градиент": "8.0.0",
"ЭКСПО-веб-браузер": "8.0.0",
"огневая база": "7.6.1",
"html-сущности": "1.2.1",
"lodash": "4.17.15",
"момент": "2.24.0",
"с OAuth 1.0 а": "^2.2.6",
"патч-пакет": "6.2.0",
"путь": "0.12.7",
"реагировать": "16.12.0",
"react-instantsearch": "6.1.0",
"реагировать родной": "https://github.com/expo/react-native/archive/sdk-36.0.0.tar.gz",
"реагировать родной анимируются": "1.3.3",
"реагировать родной-приложения-интро-слайдер": "3.0.0",
"реагировать родной-чистый-форма": "0.5.0",
"реагировать родной складной": "1.5.1",
"реагировать родной стране-комплектовщик-модальные": "1.9.8",
"реагировать родной ящик": "https://github.com/luyx2412/react-native-drawer.git",
"реагировать родной жидкости-слайдер": "1.0.2",
"реагировать родной жест-дрессировщик": "~1.5.0",
"реагировать родной-изображения-зум-зритель": "2.2.27",
"реагировать родной клавиатуры-в курсе-прокрутка-вид": "0.9.1",
"реагировать родной масках-текст": "1.13.0",
"react-native-modalbox": "2.0.0",
"реагировать родной газете": "3.4.0",
"реагировать родной параллакс": "0.3.0",
"реагировать родной радио-кнопки": "1.0.0",
"реагировать родной реанимированный": "~1.4.0",
"реагировать родной рендер в формате HTML": "4.1.2",
"реагировать родной-перезагрузка": "0.0.13",
"реагировать родной экранов": "2.0.0-Альфа.12",
"реагировать родной прокрутки-вкладка Вид": "1.0.0",
"реагировать родной стороне-меню": "1.1.3",
"реагировать родной оснастки карусель": "3.8.4",
"react-native-star-rating": "1.1.0",
"реагировать родной-салфетки-лист-вид": "2.1.2",
"реагировать родной-подметалка": "^1.6.0-ночные.5",
"реагировать родной WebView программа": "8.0.1",
"react-навигация": "^4.0.10",
"реагировать-навигация-заголовок-кнопки": "3.0.4",
"реагировать-навигация-реквизит-маппер": "1.0.1",
"реагировать-навигация-стек": "^1.10.3",
"реагировать-навигация-закладки": "^2.6.2",
"реагировать-возвращение": "7.1.3",
"возвращение": "4.0.5",
"redux-действия": "2.6.5",
"я полагаю,-упорствует": "^5.9.1",
"вместе подумать": "2.3.0",
"повторный выбор": "4.0.0",
"tcomb-form-native": "0.6.20",
"urijs": "1.19.2",
"адрес": "0.11.0",
"юзабилити-анализа": "1.4.7",
"утиль": "0.12.1",
"идентификатор": "3.3.3",
"validate.js": "0.13.1",
"wpapi": "^1.2.1"
},
"devDependencies": {
"Вавилонская шутка": "24.9.0",
"Бабель-плагин-трансформировать-удалить-консоль": "6.9.4",
"Бабель-предустановки-ЭКСПО": "8.0.0",
"Бабель-предустановки-реагировать родной": "4.0.1",
"шутка": "24.9.0",
"reactotron-react-native": "3.6.4",
"реактотрон-редукс": "3.1.1"
}
Цитата:это задокументировано на странице Бабеля здесь https://babeljs.io/docs/en/babel-plugin-proposal-decorators.
Я попробовал бежать: yarn add @babel/plugin-предложение-декораторы
Цитата:но я все еще получаю ту же ошибку, я не знаю, является ли это синтаксической ошибкой, но каждый раз, когда я запускаю ее, я получаю эту ошибку.
Что я уже пробовал:
Цитата:Я попытался запустить: пряжа добавить @Бабеля/плагин-предложение-декораторов