时间戳

首页 > 解决方案 > 尝试从本地 JSON 文件调用图像时不会加载图像

javascript - 尝试从本地 JSON 文件调用图像时不会加载图像

问题描述

我能够从我在 RN 中创建的本地 JSON 文件动态引入数据。但是，当我返回并为每个配置文件插入一个图像以便它可以与他们的配置文件信息一起动态显示时，该应用程序中断说“该组件不能包含子项。如果您想在图像顶部呈现内容，请考虑使用”。
我已经为所有配置文件使用了背景，所以我真的不明白它在说什么，因为我在 JSON 文件中输入的图像将是每个字符的配置文件图像。我是否遵循正确的格式来调用图像？任何帮助，将不胜感激。

这就是我设置 JSON 文件的方式：

  const characters = [
      { id: "1", name: "Homer Simpson", occupation: "Nuclear Safety Inspector", 
        url:
          "https://assets.fxnetworks.com/cms/prod/shows/the-simpsons/photos/simpsons-sidebar/character-facts/Homer/swsb_character_fact_homer_288x763.png"
       },
      { id: "2", name: "Marge Simpson", occupation: "Stay-at-home mom", url:
      "https://assets.fxnetworks.com/cms/prod/shows/the-simpsons/photos/simpsons-sidebar/character-facts/Homer/swsb_character_fact_homer_288x763.png"},
      { id: "3", name: "Bart Simpson", occupation: "Student", url:
      "https://assets.fxnetworks.com/cms/prod/shows/the-simpsons/photos/simpsons-sidebar/character-facts/Homer/swsb_character_fact_homer_288x763.png" },
      { id: "4", name: "Lisa Simpson", occupation: "Student", url:
      "https://assets.fxnetworks.com/cms/prod/shows/the-simpsons/photos/simpsons-sidebar/character-facts/Homer/swsb_character_fact_homer_288x763.png" },
      { id: "5", name: "Maggie Simpson", occupation: "Baby", url:
      "https://assets.fxnetworks.com/cms/prod/shows/the-simpsons/photos/simpsons-sidebar/character-facts/Homer/swsb_character_fact_homer_288x763.png" }

 export default characters;

这就是我将其引入的方式：

import React from "react";
import {
  View,
  Text,
  StyleSheet,
  Image,
  Button,
  ImageBackground
} from "react-native";
class CharacterProfiles extends React.Component {
  static navigationOptions = {
    title: "The Simpsons",
    headerStyle: {
      backgroundColor: "#53b4e6"
    },
    headerTintColor: "#f6c945",
    headerTitleStyle: {
      fontWeight: "bold"
    }
  };
  render() {
    const { item } = this.props.navigation.state.params;
    return (
      <View>
        <ImageBackground
          source={{
            uri:
              "https://backgrounddownload.com/wp-content/uploads/2018/09/simpsons-clouds-background-5.jpg"
          }}
          style={{ width: "100%", height: "100%" }}
        >
          <Image>{item.url}</Image>
          <Text>Name: {item.name}</Text>
          <Text>Occupation: {item.occupation}</Text>
          <Button
            title="Character Directory"
            onPress={() => this.props.navigation.navigate("CharacterDirectory")}
          />
          <Button
            title="Homepage"
            onPress={() => this.props.navigation.navigate("Home")}
          />
        </ImageBackground>
      </View>
    );
  }
}
export default CharacterProfiles;

标签： javascriptjsonreact-native

解决方案

与您已经对ImageBackground组件完成的方式相同，您需要使用该source属性来分配Image. 你可以在 React Native 的Image 组件文档中看到更详细的例子。

<Image
  source={{uri: item.url}}
/>

将标签内容中的源 URL<Image>作为文本包含在内将无效。这样做基本上等同于在 HTML 中编写以下内容：

<img>https://example.com/myImage.png</img>

您会收到关于将内容放在图像顶部的警告，因为 React Native 认为您正在尝试将 URL作为文本叠加在图像上。由于 HTML<img>元素不能做到这一点，Image组件也不能。

推荐阅读