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

通过带有React Native的WordPress REST API显示标题和特色图片

1 个答案: