在离子3中使用zuck js库 [英] using zuck js library in ionic 3

问题描述

我想在zuck.js库中使用离子应用程序实现故事效果
zuck.js

I want to implement stories effect in ionic app by using in zuck.js library zuck.js

我安装它

npm install zuck

然后将其导入我的家庭组件

then import it in my home component

 import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';
import * as zuck from "zuck";

@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {

   stories = new Zuck('stories', {

    backNative:true,

    autoFullScreen:'false',

    skin:'Snapgram',

    avatars:'true',

    list:false,

    cubeEffect:'true',

    localStorage:true,

    stories: [],

    });
  constructor(public navCtrl: NavController) {

  }

但它显示我错误降压Zuck大写字母未定义

but it shows me error buck Zuck with capital letter not defined

referenceError：Zuck未定义ReferenceError：Zuck未在新主页上定义

referenceError: Zuck is not defined ReferenceError: Zuck is not defined at new HomePage

我想把它改成

import * as Zuck from "zuck";

但我得到同样的错误。

UPDATE！
我将导入更改为

UPDATE!!! I changed the import to

import Zuck from 'zuck';

我收到错误

运行时错误
找不到模块反应

Runtime Error Cannot find module "react"

无法在离子中使用zuck.js ？

is not possible to use zuck.js in ionic?

在宣布Zuck之后我想要创建对象我得到了

after declaring Zuck i want to create object and I get

不能读取属性'id'为null TypeError：在新窗口中无法读取属性'id'
of null.ZuckitaDaGalera.window.Zuck
（ http：// localhost：8100 / build / vendor.js：115204：23 ）新主页

    import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';
import 'zuck.js/zuck.js';
declare var Zuck;

@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {

  stories = new Zuck('stories', {
    backNative: true,
    autoFullScreen: 'false',
    skin: 'Snapgram',
    avatars: 'true',
    list: false,
    cubeEffect: 'true',
    localStorage: true,
    stories: [
      {
        id: 'vision',
        photo: 'https://cnet4.cbsistatic.com/img/QJcTT2ab-sYWwOGrxJc0MXSt3UI=/2011/10/27/a66dfbb7-fdc7-11e2-8c7c-d4ae52e62bcc/android-wallpaper5_2560x1600_1.jpg',
        name: 'Tech',
        link: '',
        lastUpdated: 1492665454,
        items: [
          this.buildItem('1', 'photo', 3, 'https://pbs.twimg.com/profile_images/782474226020200448/zDo-gAo0_400x400.jpg','', '', false, 1492665454),
          this.buildItem('2', 'photo', 3, 'https://vignette4.wikia.nocookie.net/ironman/images/5/59/Robert-Downey-Jr-Tony-Stark-Iron-Man-3-Marvel-Disney.jpg/revision/latest?cb=20130611164804', '', '',false, 1492665454),
          this.buildItem('3', 'video', 0, 'https://scontent-gru2-2.cdninstagram.com/t50.2886-16/14965218_193969377722724_482497862983221248_n.mp4', 'https://scontent-gru2-2.cdninstagram.com/t51.2885-15/e15/10597412_455246124639813_1360162248_n.jpg', '', false, 1492665454),
        ],
      }],
  });

  constructor(public navCtrl: NavController) {

  }
  buildItem(id, type, length, src, preview, link, seen, time) {

    // Using object short-hand (id: id)
    return {id,type,length,src,preview,link,seen,time,
    };

    }

}

推荐答案

在我发表评论后，我意识到你使用了错误的npm包 zuck 。 这个 npm包是完全不同的，这就是为什么你得到反应模块错误。请改用这个：

After I posted my comment I realized that you are using the wrong npm package for zuck. This npm package is something completely different and thats why you are getting the react module error. Use this one instead:

npm install zuck.js

并像那样导入它：

import 'zuck.js/zuck.js';
declare var Zuck;

这篇关于在离子3中使用zuck js库的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！