React Native本地JSON加载图片报错及调用格式咨询

你的崩溃报错根源很清晰：React Native的<Image>组件完全不允许包含任何子元素，但你现在把图片URL直接写在了<Image>标签内部（<Image>{item.url}</Image>），这就违反了组件的使用规则，直接触发了报错提示。

错误代码定位 #

你这里的写法是典型错误：

<Image>{item.url}</Image>

正确的图片加载方式 #

React Native的<Image>组件需要通过source属性传入图片资源，网络图片必须写成source={{ uri: 图片URL }}的格式。修正后的CharacterProfiles组件代码如下：

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 style={{ flex: 1 }}> {/* 添加flex:1确保容器占满屏幕 */}
        <ImageBackground 
          source={{ uri: "https://backgrounddownload.com/wp-content/uploads/2018/09/simpsons-clouds-background-5.jpg" }} 
          style={{ flex: 1, width: "100%", padding: 20 }} // 加padding避免内容贴边
        >
          {/* 正确的Image组件用法 */}
          <Image 
            source={{ uri: item.url }} 
            style={{ width: 150, height: 150, borderRadius: 75 }} // 必须设置宽高，否则图片不显示
          />
          <Text style={{ fontSize: 18, marginTop: 10 }}>Name: {item.name}</Text>
          <Text style={{ fontSize: 16, marginTop: 5 }}>Occupation: {item.occupation}</Text>
          <Button 
            title="Character Directory" 
            onPress={() => this.props.navigation.navigate("CharacterDirectory")}
          />
          <Button 
            title="Homepage" 
            onPress={() => this.props.navigation.navigate("Home")}
            style={{ marginTop: 10 }}
          />
        </ImageBackground>
      </View>
    );
  }
}

export default CharacterProfiles;

额外优化提示 #

1. 必须给Image设置宽高：React Native的网络图片不会自动适配尺寸，显式设置width和height是图片正常显示的必要条件，你也可以根据需求调整为合适的数值。
2. 容器样式调整：给最外层<View>和<ImageBackground>添加flex:1，能确保背景图铺满整个屏幕，避免内容被截断。
3. 数据小问题：你的JSON里所有角色的url都是Homer的图片，后续记得替换成对应角色的头像地址哦~

内容的提问来源于stack exchange，提问作者csb00