Question

我是React Native的初学者，当时正在开发一个可从我的API提取文本和图像并将其显示在屏幕上的应用程序。显示文本，但不显示图像。没有错误。我只有一个主文件：API调用为

的App.js

  https://www.teanewsnetwork.com/api/fetcharticles.php?code=Me*z6Pcw9e1$CQ)YWgMlFe%nv(Hq)lhw&starting=0&limit=20

App.js：

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
import React, { Component } from 'react';
import {
  View,
  Text,
  ActivityIndicator,
  ScrollView,
  StyleSheet,
  Image,
} from 'react-native';

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=Me*z6Pcw9e1$CQ)YWgMlFe%nv(Hq)lhw&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}>
        <Text>{authorname}</Text>
        <Image
          source={{
            uri: 'https://teanewsnetwork.com/profileicons/',
          }}
          style={{ width: 40, height: 40 }}
        />

        <Text style={styles.postauthor}>{title}</Text>
        <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,
  },

  postauthor: {
    flex: 1,
    borderBottomWidth: 1,
    borderBottomColor: '#EEE',
    paddingVertical: 25,
    paddingRight: 15,
  },

  postContent: {
    flex: 1,
    borderBottomWidth: 1,
    borderBottomColor: '#EEE',
    paddingVertical: 25,
    paddingRight: 15,
    left: 10,
  },
  postBody: {
    marginTop: 10,
    fontSize: 12,
    color: 'lightgray',
    left: 10,
  },
  center: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
});

我想在要从链接中获取的每个名称下方显示我的图像

 www.teanewsnetwork.com/profileicons/{{authorimage}}

API中给定{{authorimage}}的位置。但这似乎不起作用。谢谢，谢谢！

Answer 1

您可以在JavaScript中使用template literals。这会将authtorimage附加到字符串的末尾。

<Image
        source={{
            uri: `https://teanewsnetwork.com/profileicons/${authorimage}`,
        }}
        style={{ width: 40, height: 40 }}/>

模板文字用反引号（```）（重音符）而不是双引号或单引号引起来。模板文字可以包含占位符。这些由美元符号和大括号(${expression})指示。占位符中的表达式及其之间的文本将传递给函数。

Answer 2

除了在下面我指出的两个地方以外，您做得非常正确：
-在导入react本机组件时，您也在做：

import Img from 'react-image';

这是不必要的，因为react native本身提供了Image组件。
-另外，您需要在图片的来源中将authorimage的值传递为：

<Image 
  source= {{
    uri: `https://teanewsnetwork.com/profileicons/${authorimage}`,
  }}
  style={{height: 40, width: 40}}
/>

在这里，是工作snack的链接。如果您想了解有关图像如何在本机反应中工作的更多信息，可以访问此link。

无法从React Native中的API获取图像

2 个答案: