vue-native бесконечный свиток с интонацией - PullRequest
0 голосов
/ 12 ноября 2018

Я хочу сделать пример, который включает в себя список с бесконечной прокруткой, содержащий компоненты CardImage. Я слежу за этим блогом, и он используется impagination package. От этого примера отличается только то, что я использую vue-native, который является оболочкой для React Native API.

Когда я запускаю приложение на эмуляторе, компонент CardImage отображается успешно. Но когда я вызываю функцию setupImpagination (), я получаю сообщение об ошибке «_impagination.Dataset не является конструктором». Я что-то пропустил или это проблема совместимости реактивной и vue-native? Любая помощь будет великолепна.

App.vue

<template>
    <nb-container>
        <nb-header />
        <nb-content padder>
            <nb-card>
                <nb-card-item>
                    <nb-left>
                        <nb-thumbnail :source="logo"></nb-thumbnail>
                        <nb-body>
                            <nb-text>NativeBase</nb-text>
                            <nb-text note>GeekyAnts</nb-text>
                        </nb-body>
                    </nb-left>
                </nb-card-item> 
                <nb-card-item cardBody>
                    <image :source="cardImage" class="card-item-image" :style="stylesObj.cardItemImage"/>
                </nb-card-item>
                <nb-card-item>
                    <nb-left>
                        <nb-button :onPress="setupImpagination">
                            <nb-icon name="thumbs-up" active></nb-icon>
                            <nb-text>4923 Likes</nb-text>
                        </nb-button>
                    </nb-left>
                    <nb-body>
                        <nb-button transparent>
                            <nb-icon name="chatbubbles" active></nb-icon>
                            <nb-text>89 Comments</nb-text>
                        </nb-button>
                    </nb-body>
                    <nb-right>
                        <nb-text>11h ago</nb-text>
                    </nb-right>
                </nb-card-item>
            </nb-card>
        </nb-content>
    </nb-container>
</template>

<style>
.container {
    background-color: white;
    align-items: center;
    justify-content: center;
    flex: 1;
}
.text-color-primary {
    color: blue;
}
.card-item-image {
    align-self: center;
    height: 150;
    margin-vertical: 5;
}
</style>

<script>
    import { Dataset }  from "impagination";
    import logo from "./assets/logo.png";
    import cardImage from "./assets/drawer-cover.png";
    import { Dimensions } from "react-native";
    const deviceWidth = Dimensions.get("window").width;

    export default {
        data: function() {
            return {
                logo,
                cardImage,
                stylesObj: {
                    cardItemImage: {
                        resizeMode: "cover",
                        width: deviceWidth / 1.18
                    }
                }
            };
        },
        methods: {
            setupImpagination:function(){
                console.log("setupImpagination");
                let dataset = new Dataset({
                    pageSize: 15,
                    loadHorizon: 10,
      fetch:function(pageOffset, pageSize, stats) {
        return fetch('https://serene-beach-38011.herokuapp.com/api/faker?page='+${pageOffset + 1}+'&per_page='+${pageSize}+')'
        .then(response => {response.json();
            console.log(response.json())})
        .catch((error) => {
            console.error(error);
        });
      },
      unfetch: function(records, pageOffset) {
        console.log("unfetch")
      },
      filter: function(element, index, array) {
        console.log("filter")
      },
        observe:(datasetState) => {
        console.log("observe");
      }
  });
            }   

        }

    }
</script>

package.json

{
  "name": "my_app",
  "version": "0.0.1",
  "private": true,
  "scripts": {
    "start": "node node_modules/react-native/local-cli/cli.js start",
    "test": "jest"
  },
  "dependencies": {
    "impagination": "^1.0.0-alpha.3",
    "native-base": "^2.8.1",
    "react": "16.3.1",
    "react-native": "0.55.4",
    "vue-native-core": "0.0.8",
    "vue-native-helper": "0.0.9"
  },
  "devDependencies": {
    "babel-jest": "23.6.0",
    "babel-preset-react-native": "4.0.1",
    "jest": "23.6.0",
    "react-test-renderer": "16.3.1",
    "vue-native-scripts": "0.0.14"
  },
  "jest": {
    "preset": "react-native"
  }
}
...