Реагируй родной ползучий черио - PullRequest
Новая
       31

Реагируй родной ползучий черио

0 голосов
/ 20 марта 2019

Я пытаюсь сканировать, используя cheerio на реагировать на нативном, чтобы получить информацию и упорядочить ее, а затем поместить ее в ScrollView.

Но когда я пытаюсь напечатать HTML-код страницы, чтобы увидетьчто произойдет, и если вызов успешен, на консоли ничего не печатается.

Я пытаюсь напрямую перекусить на snack.expo.io, чтобы иметь возможность провести несколько тестов.

Где я?Я не так делаю?

Ссылка: Экспо

Код: 

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