未定义不是函数(评估'decorator(target,property,desc)') [英] undefined is not a function (evaluating 'decorator(target, property, desc)')
问题描述
I want to integrate mobx and mobx-persist with react-navigation.
I read these articles:
[1] https://hackernoon.com/react-navigation-with- mobx-2064fcdaa25b
[2] https://blog .callstack.io/write-react-native-apps-in-2017-style-with-mobx-e2dffc209fcb
[3] https://github .com/react-navigation/react-navigation/blob/8e8d3d562c9e80616f145f97ffb02dcf2048e67e/docs/guides/Mobx-Integration.md
[4] MobX + React Native:注入商店的方式
[5] MobX -在将数据注入到React组件中时可以使用`inject`时为什么要使用`observer
[6] 在React组件中注入存储会导致错误
[1] https://hackernoon.com/react-navigation-with-mobx-2064fcdaa25b
[2] https://blog.callstack.io/write-react-native-apps-in-2017-style-with-mobx-e2dffc209fcb
[3] https://github.com/react-navigation/react-navigation/blob/8e8d3d562c9e80616f145f97ffb02dcf2048e67e/docs/guides/Mobx-Integration.md
[4] MobX + React Native : way to inject stores
[5] MobX - Why should I use `observer` when I could use `inject` when injecting data into a React component
[6] Injecting Store in React component results in Error
但我仍然遇到此错误:
undefined is not a function (evaluating 'decorator(target, property, desc)')
这是我的App.js渲染:
This is my App.js render:
render() {
const hydrate = create({
storage: AsyncStorage
});
hydrate('playerStore', stores.PlayerStore);
hydrate('settingStore', stores.SettingStore);
// .then(
// // () => console.warn('some hydrated')
// );
return <Provider {...stores} >
<AppWithNavigationState />
</Provider>;
}
这是我的routeStore.js:
This is my routeStore.js:
import {observable} from "mobx";
import {action} from "mobx-react/native";
import AppDrawer from "../appDrawer";
import {autobind} from 'core-decorators';
export default class RouteStore {
@observable.ref navigationState = {
index: 0,
routes: [
{ key: "R1", routeName: "ContentStack" },
],
};
@action
dispatchNavigation(action, stackState = true) {
const previousNavState = stackState ? this.navigationState : null;
return this.navigationState = AppDrawer.router.getStateForAction(action, previousNavState);
}
}
这是我的appWithNavigationState.js:
This is my appWithNavigationState.js:
import React from 'react';
import {observer, inject} from "mobx-react/native";
import {addNavigationHelpers} from "react-navigation";
import AppDrawer from "../appDrawer";
@inject(stores => ({ routeStore: stores.RouteStore }))
@observer
export default class AppWithNavigationState extends React.Component {
render() {
return (
<AppDrawer navigation={addNavigationHelpers({
dispatch: this.props.routeStore.dispatchNavigation,
state: this.props.routeStore.navigationState,
})} />
);
}
}
我还使用装饰器包,如下所示:
I also use decorator package as below:
npm install babel-plugin-transform-decorators-legacy --save-dev
以及babelrc
文件中的此设置:
{
"presets": ["react-native"],
"plugins": ["transform-decorators-legacy"]
}
您能帮我解决这个问题吗?
Can you help me to fix this?
推荐答案
默认情况下,React Native Babel转换配置不包括对ES7装饰器的支持.
By default, the React Native Babel transform configuration does not include support for ES7 decorators.
您可以通过先安装装饰程序包来添加它们:
You can add them by first installing the decorator package:
npm install babel-plugin-transform-decorators-legacy --save-dev
,然后在项目根目录的.babelrc
文件中添加插件:
And then adding the plugin in your .babelrc
file in the project root:
{
"presets": ["react-native"],
"plugins": ["transform-decorators-legacy"]
}
这篇关于未定义不是函数(评估'decorator(target,property,desc)')的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!