我正在尝试使用cheerio在react native上进行爬网,以获取信息并将其组织起来,然后将其放入ScrollView中。
但是,当我尝试打印页面的html代码以查看会发生什么,并且如果调用成功时,控制台上将不会打印任何内容。
我正在直接尝试Snake.expo.io,以便能够进行一些测试。
我在哪里做错了?
链接:Expo
代码:
import * as React from 'react';
import {
Text,
View,
StyleSheet,
ScrollView,
TouchableOpacity,
Image,
} from 'react-native';
import { Constants } from 'expo';
import * as cloudscraper from 'react-native-cloudscraper';
import cio from 'cheerio-without-node-native';
const Item = props => (
<TouchableOpacity onPress={() => alert('ASIN:' + props.asin)}>
<Text>{props.title}</Text>
<Image source={{ uri: props.imageUrl }} />
<Text>{props.price}</Text>
<Text>{props.rating}</Text>
</TouchableOpacity>
);
export default class App extends React.Component {
state = {
page: 0,
items: [],
};
componentDidMount = () => this.loadNextPage();
async loadGraphicCards(page = 1) {
try {
const searchUrl = 'https://www.amazon.it/s?k=pc&page=' + page;
//const searchUrl = 'https://facebook.github.io/react-native/movies.json';
const response = await fetch(searchUrl); // fetch page
const htmlString = await response.text(); // get response text
const $ = cio.load(htmlString); // parse HTML string
/*cloudscraper
.get(searchUrl)
.then(response => response.text())
.then(responseHtml => {
var x = cio.load(responseHtml);
console.log('Urlembed:', x);
})
.catch(error => {
console.error(error);
});*/
console.log('h:', htmlString);
console.log('s:', $('#s-result-list'));
return $('#s-result-list') // select result <li>s
.map((_, li) => ({
// map to an list of objects
asin: $(li).data('asin'),
title: $('h2', li).text(),
price: $('span.a-color-price', li).text(),
rating: $('span.a-icon-alt', li).text(),
imageUrl: $('img.s-image').attr('src'),
}));
} catch (error) {
console.error(error);
}
}
loadNextPage = () =>
this.setState(async state => {
const page = state.page + 1;
const items = await this.loadGraphicCards(page);
return { items, page };
});
render = () => (
<ScrollView>
{this.state.items.map(item => (
<Item {...item} key={item.asin} />
))}
</ScrollView>
);
}
const styles = StyleSheet.create({
/*container: {
flex: 1,
justifyContent: 'center',
paddingTop: Constants.statusBarHeight,
backgroundColor: '#ecf0f1',
padding: 8,
},
paragraph: {
margin: 24,
fontSize: 18,
fontWeight: 'bold',
textAlign: 'center',
},*/
});