Я хочу сделать пример, который включает в себя список с бесконечной прокруткой, содержащий компоненты 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"
}
}