javascript - React Native 应用程序可以在 iOS 上运行，但在 Android 上出现错误 posts.map 未定义

问题描述

我创建了一个简单的程序来在应用程序上显示来自我的网站的信息。它适用于 iOS，但在我的 Android 设备上显示错误：posts.map 不是函数。这是我的代码：

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

let lw = 100;

import Img from 'react-image';

let li = 'https://www.teanewsnetwork.com/profileicons/';
let bean = 'azure.jpg';

export default class App extends Component {
  state = {
    loading: true,
    error: false,
    posts: [],
  };

  componentWillMount = async () => {
    try {
      const response = await fetch(
        'https://www.teanewsnetwork.com/api/fetcharticles.php?code=#NIL7*GKD60JTRTEFZ0CkvpHMJJW^-9q&starting=0&limit=40'
      );
      const posts = await response.json();

      this.setState({ loading: false, posts });
    } catch (e) {
      this.setState({ loading: false, error: true });
    }
  };

  renderPost = ({ id, title, content, authorimage, authorname }, i) => {
    let b = { authorname };
    return (
      <View style={styles.postContent}>
        <View
          style={{
            flex: 1,
            flexDirection: 'column',
            textAlign: 'center',
            justifyContent: 'center',
            alignItems: 'center',
          }}>
          <Text style={styles.postauthor}>{title} </Text>

          <Image
            source={{
              uri: `https://teanewsnetwork.com/profileicons/${authorimage}`,
            }}
            defaultSource={require('./contact-outline.png')}
            style={{
              width: lw,
              height: lw,
              flex: 1,
              justifyContent: 'center',
              alignItems: 'center',
              borderRadius: lw / 2,
            }}
          />

          <Text style={styles.postauthor}>{authorname}</Text>
        </View>
        <Text style={styles.postBody}>{content}</Text>
      </View>
    );
  };

  render() {
    const {posts, loading, error} = this.state

    if (loading) {
      return (
        <View style={styles.center}>
          <ActivityIndicator animating={true} />
        </View>
      )
    }

    if (error) {
      return (
        <View style={styles.center}>
          <Text>
            Failed to load posts!
          </Text>
        </View>
      )
    }

    return (
      <ScrollView style={styles.container}>
        {posts.map(this.renderPost)}
      </ScrollView>
    )
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    borderBottomWidth: 0,
    borderBottomColor: 'red',

    top: 100,
    zIndex: 6,
  },

  postauthor: {
    flex: 1,
    borderBottomWidth: 0,
    borderBottomColor: 'red',
    paddingVertical: 25,
    fontSize: 18,
    paddingRight: 15,
    left: 10,
    justifyContent: 'center',
    alignItems: 'center',
    textAlign: 'center',
  },

  postContent: {
    flex: 1,
    borderBottomWidth: 20,
    borderBottomColor: '#EEE',
    borderRadius: 4,

    fontSize: 18,
    left: 0,
    paddingRight: 15,
    justifyContent: 'center',
    alignItems: 'center',
    textAlignVertical: 'center',
    textAlign: 'center',
  },
  postBody: {
    marginTop: 1,
    fontSize: 18,
    color: 'black',
    left: 10,
    textAlign: 'center',
  },
  center: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
});

我是 react native 的初学者编码器，希望在这里得到一些帮助。该代码适用于带有 EXPO 的 iOS 模拟器，但不适用于我的 Android 设备。提前致谢！

标签： javascriptreact-native

javascript - React Native 应用程序可以在 iOS 上运行，但在 Android 上出现错误 posts.map 未定义

问题描述

解决方案

推荐阅读