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

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