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

Question

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

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

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

Answer 1

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

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

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

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',
  },
})

Answer 2

1. Откройте папку плагинов в вашей установке WordPress и создайте новый плагин.
2. Откройте вновь созданный файл плагина и вставьте следующий код:

          if (!defined('ABSPATH')) {
    die("You cannot access this website!!!");}
    function react_customizer_rest_api_init(){
    register_rest_field('post', 'featured_src', ['get_callback' =>'react_customizer_get_featured_img',]);}
    add_action('rest_api_init', 'react_customizer_rest_api_init');
    register_activation_hook(__FILE__, 'react_customizer_plugin_activate');

3. Сохраните файл и активируйте плагин.

Теперь вы можете увидеть в своем коде новое поле Featured_src. используйте это для отображения изображения сообщения.