Показать заголовок и рекомендуемое изображение из WordPress REST API с помощью React Native - PullRequest
Новая
       6

Показать заголовок и рекомендуемое изображение из WordPress REST API с помощью React Native

0 голосов
/ 23 сентября 2018

Я пытаюсь получить заголовки и избранные изображения с нескольких страниц, которые включены в ответ JSON.После поиска и попытки чего-то, я застреваю при отображении необходимых элементов.Код на стороне React Native выглядит следующим образом:

https://snack.expo.io/@jvdl2711/artists

Я нашел способ отобразить свои данные в нужном порядке и стиле.К сожалению, каждый «пост» должен быть кликабельным, чтобы переходить на другие экраны и визуализировать эти отдельные посты, но я не знаю как, потому что объекты отображаются не так, как ожидалось в данный момент.Есть ли способ как это решить?

1 Ответ

0 голосов
/ 23 сентября 2018

Проблема с вашим подходом заключается в том, что вы не выполняете итерации своих данных.

Таким образом, чтобы создать требуемое поведение, вам нужно использовать что-то похожее на это (вам нужно исправить стиль в соответствии с вашими спецификациями):

(в этот пример я добавил индикатор загрузки и простую обработку ошибок, также вам нужно добавить изображение по умолчанию, потому что я заметил некоторые элементы без больших пальцев) 

import React, {Component} from 'react';
import {
  View,
  Text,
  FlatList,
  StyleSheet,
  Image,
  ActivityIndicator,
} from 'react-native';

export default class Home extends Component {
  state = {
    data: [],
    isLoading: true,
    isError: false,
  }

  componentWillMount() {
    fetch('http://54.168.73.151/wp-json/wp/v2/pages?parent=38&per_page=100')
        .then((response) => response.json())
        .then((responseJson) => {
          this.setState({
            data: responseJson,
            isLoading: false,
            isError: false
          })
        })
        .catch((error) => {
          this.setState({
            isLoading: false,
            isError: true
          })
          console.error(error);
        });
  }

  renderRow = (item) => (
      <View>
        <Image
            style={styles.thumb}
            source={{uri: item.better_featured_image ? item.better_featured_image.source_url : 'url to a default image'}}
        />
        <Text style={styles.title}>{item.title.rendered}</Text>
      </View>
  )

  getKey = (item) => String(item.id)

  renderComponent() {
    if (this.state.isLoading) {
      return (
          <ActivityIndicator/>
      )
    } else if (this.state.isError) {
      return (
          <Text>Error loading data</Text>
      )
    } else {
      return (
          <FlatList
              data={this.state.data}
              renderItem={({item}) => this.renderRow(item)}
              keyExtractor={this.getKey}
          />
      )
    }
  }

  render() {
    return (
        <View style={styles.container}>
          {this.renderComponent()}
        </View>
    )
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
  },
  thumb: {
    height: 100,
    width: 100,
    resizeMode: 'cover',
  },
})
...