使用React Native显示来自WordPress REST API的标题和特色图像

vohkndzv  于 2023-03-29  发布在  WordPress
关注(0)|答案(2)|浏览(152)

我试图从JSON响应中包含的几个页面中获取标题和特色图像。在搜索了一段时间并尝试了一些东西之后,我在显示所需的元素时卡住了。React Native端的代码看起来像这样:
https://snack.expo.io/@jvdl2711/artists
我找到了一种方法来显示我的数据在所需的顺序和风格.不幸的是,每个'帖子'应该是可点击的导航到其他屏幕和可视化这些单独的帖子,但我不知道如何,因为对象呈现不同的预期在目前.有没有办法如何解决这个问题?

yyyllmsg

yyyllmsg1#

你的方法的问题是你没有迭代你的数据。
因此,要创建想要的行为,您需要使用类似于以下内容的内容(您需要根据您的规格修复样式):
(我在这个例子中添加了一个加载指示器和一个简单的错误处理,你还需要添加一个默认图像,因为我注意到一些项目没有拇指)

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

ykejflvf2#

1.打开WordPress安装中的插件文件夹并创建一个新的插件。
1.打开新创建的插件文件并粘贴以下代码:

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');

1.保存文件并激活插件。
现在你可以在你的代码中看到一个新的字段'featured_src'。使用它来显示文章的图像。

相关问题