加入收藏 | 设为首页 | 会员中心 | 我要投稿 李大同 (https://www.lidatong.com.cn/)- 科技、建站、经验、云计算、5G、大数据,站长网!
当前位置: 首页 > 百科 > 正文

react-native – undefined不是一个函数(评估’decorator(target

发布时间:2020-12-15 20:20:11 所属栏目:百科 来源:网络整理
导读:我想将 mobx和 mobx-persist与 react-navigation集成. 我读过这些文章: [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://g
我想将 mobx和 mobx-persist与 react-navigation集成.
我读过这些文章:

[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渲染:

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:

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:

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,})} />
        );
    }
}

我也使用decorator包如下:

npm install babel-plugin-transform-decorators-legacy --save-dev

和babelrc文件中的此设置:

{
  "presets": ["react-native"],"plugins": ["transform-decorators-legacy"]
}

你能帮我解决这个问题吗?

解决方法

默认情况下,React Native Babel转换配置不包括对ES7装饰器的支持.

您可以通过首先安装装饰器包来添加它们:

npm install babel-plugin-transform-decorators-legacy --save-dev

然后在项目根目录中的.babelrc文件中添加插件:

{
  "presets": ["react-native"],"plugins": ["transform-decorators-legacy"]
}

(编辑:李大同)

【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容!

    推荐文章
      热点阅读