React Native 中动态传递图片 Prop 的教程-js教程-PHP中文网

React Native 中动态传递图片 Prop 的教程

本教程旨在解决 react native 中通过 `prop` 传递并显示动态图片路径的问题。我们将深入探讨 `image` 组件的 `require()` 和 `uri` 两种图片加载方式，分析常见的错误原因，并提供一种构建完整 http url 的解决方案，以确保从 api 获取的图片能够正确加载和显示，同时包含示例代码和重要注意事项。

理解 React Native 中的图片资源加载

在 React Native 应用中，加载图片主要有两种方式，它们适用于不同的场景：

静态资源（捆绑在应用包中）：使用 require('./path/to/image.png') 语法来加载与应用一同打包的本地图片。 关键点：require() 函数的参数必须是一个静态字符串字面量。这意味着你不能在 require() 内部使用变量或动态拼接的字符串来构建路径。打包工具（如 Metro）在编译时需要解析这些路径，以便将图片资源包含到最终的应用包中。

示例：
```
<Image source={require('../assets/my_static_image.png')} />
```
登录后复制
错误示例：
```
const imageName = 'my_static_image.png';
<Image source={require(`../assets/${imageName}`)} /> // 这会导致“Cannot find module”错误
```
登录后复制
动态资源（远程 URL 或本地文件系统路径）：使用 source={{ uri: '...' }} 语法来加载通过网络（HTTP/HTTPS）或设备本地文件系统获取的图片。 关键点：uri 属性的值必须是一个完整的、可访问的 URI。对于网络图片，它必须是一个完整的 HTTP 或 HTTPS URL（例如 http://example.com/images/my_image.jpg）。对于本地文件，它通常以 file:// 开头。

示例：
```
<Image source={{ uri: 'https://reactnative.dev/img/tiny_logo.png' }} />
<Image source={{ uri: 'file:///data/user/0/com.your_app/cache/image.jpg' }} />
```
登录后复制

问题分析：动态图片 Prop 传递失败的原因

在提供的代码中，尝试传递 photoLocation 作为图片路径，并遇到了两种不同的问题：

原始 photoLocation 格式： "../client/public/images/1685958934714.jpeg"

使用 require 导致 Cannot find module 错误：
```
const image = require(`..` + props.image.substring(9));
// ...
<Image source={image} />
```
登录后复制
原因：如前所述，require() 不支持动态路径。即使 props.image.substring(9) 能够正确截取路径，整个 require() 表达式在编译时仍然是一个动态构造的字符串，Metro 无法在打包时解析它，因此报告找不到模块。
使用 uri 但图片不显示：
```
<Image style={styles.image} source={{uri:`..${props.image.substring(9)}`}}/>
```
登录后复制
原因：这里的 props.image.substring(9) 截取后得到的是 public/images/1685958934714.jpeg。当与 .. 拼接时，uri 变成了 ../public/images/1685958934714.jpeg。这个路径是一个相对文件系统路径，而不是一个完整的 HTTP URL。React Native 的 Image 组件在处理 uri 时，如果不是以 http://、https:// 或 file:// 开头，它会尝试将其解析为相对的本地应用资源，或者一个无效的远程 URI。由于图片是从 http://192.168.8.103:8080/shoes API 获取的，它很可能是一个需要通过网络访问的资源，因此需要一个完整的网络 URL。

解决方案：构建完整的 HTTP URL

鉴于图片路径是从后端 API 获取的，最常见的场景是这些图片也由同一个服务器或另一个静态资源服务器提供。因此，正确的做法是根据 API 的基础 URL 和图片路径片段，构建一个完整的、可访问的 HTTP URL。

假设你的 API 服务器地址是 http://192.168.8.103:8080，并且图片资源也通过这个地址提供。photoLocation 字符串 ../client/public/images/1685958934714.jpeg 看起来需要被转换为服务器上的相对路径 public/images/1685958934714.jpeg。

改图鸭AI图片生成

查看详情

步骤：

确定服务器基础 URL：从 fetch 请求中可以推断出，服务器的基础 URL 是 http://192.168.8.103:8080。
提取图片路径片段：根据 photoLocation 的格式 ../client/public/images/...，通过 substring(9) 可以去除 ../client/，得到 public/images/1685958934714.jpeg。
拼接完整 URL：将基础 URL 和提取出的图片路径片段拼接起来，形成一个完整的 HTTP URL。

示例代码：

首先，在你的 HomeScreen 组件中，item.photoLocation 已经包含了图片路径。

// HomeScreen.js (部分代码)
import React, { useState, useEffect } from 'react';
import { View, Text, FlatList, ActivityIndicator, StatusBar, StyleSheet } from 'react-native';
import ShoeDisplay from './ShoeDisplay'; // 确保路径正确

const BASE_API_URL = 'http://192.168.8.103:8080'; // 定义服务器基础URL

const HomeScreen = ({ navigation }) => {
  const [shoes, setShoes] = useState([]);
  const [isLoading, setIsLoading] = useState(true);

  const fetchData = async () => {
    try {
      const receivedShoes = await fetch(`${BASE_API_URL}/shoes`);
      const receivedShoesJSON = await receivedShoes.json();
      setShoes(receivedShoesJSON);
    } catch (error) {
      console.error("Error fetching shoes:", error);
      // 处理错误，例如显示错误信息
    } finally {
      setIsLoading(false);
    }
  };

  useEffect(() => {
    fetchData();
  }, []); // 空数组表示只在组件挂载时运行一次

  return (
    <View style={styles.container}>
      {isLoading ? (
        <ActivityIndicator size="large" color="#0000ff" />
      ) : (
        <FlatList
          data={shoes}
          keyExtractor={({ id }) => id.toString()} // 确保id是字符串
          renderItem={({ item }) => (
            <ShoeDisplay
              brand={item.brand}
              name={item.name}
              price={item.price}
              // 传递完整的 photoLocation，让 ShoeDisplay 处理
              imageLocation={item.photoLocation} 
            />
          )}
        />
      )}
      <StatusBar style="auto" />
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
    paddingTop: 50, // 避免状态栏遮挡
  },
});

export default HomeScreen;

登录后复制

然后，在 ShoeDisplay 组件中，构建完整的图片 URL：

// ShoeDisplay.js
import React from 'react';
import { View, Text, Image, StyleSheet } from 'react-native';

const BASE_SERVER_URL = 'http://192.168.8.103:8080'; // 与API基础URL一致

const ShoeDisplay = (props) => {
    // 假设 props.imageLocation 是 "../client/public/images/..."
    // 移除 "../client/" 部分，得到 "public/images/..."
    const imagePathSegment = props.imageLocation ? props.imageLocation.substring(9) : '';

    // 构建完整的图片 URL
    const fullImageUrl = `${BASE_SERVER_URL}/${imagePathSegment}`;

    return (
        <View style={styles.container}>
            {/* 使用构建好的完整 URL */}
            <Image style={styles.image} source={{ uri: fullImageUrl }} />
            <Text style={styles.brand} id="brand">{props.brand}</Text>
            <Text style={styles.name} id="display-title">{props.name}</Text>
            <Text style={styles.price} id="price">€{props.price}</Text>
        </View>
    );
};

const styles = StyleSheet.create({
    container: {
        flexDirection: 'column',
        alignItems: 'center',
        marginVertical: 10,
        padding: 10,
        borderWidth: 1,
        borderColor: '#ccc',
        borderRadius: 8,
        width: '90%', // 示例宽度
    },
    image: {
        width: 150,
        height: 150,
        resizeMode: 'contain', // 保持图片比例
        marginBottom: 10,
    },
    brand: {
        fontSize: 18,
        fontWeight: 'bold',
        marginBottom: 5,
    },
    name: {
        fontSize: 16,
        color: '#555',
        marginBottom: 5,
    },
    price: {
        fontSize: 16,
        fontWeight: 'bold',
        color: 'green',
    },
});

export default ShoeDisplay;

登录后复制

重要注意事项

网络权限：
- Android：确保 AndroidManifest.xml 中有 <uses-permission android:name="android.permission.INTERNET" /> 权限。
- iOS：通常不需要额外配置，但如果使用非 HTTPS 的 URL，可能需要在 Info.plist 中配置 NSAppTransportSecurity 来允许 HTTP 请求（不推荐用于生产环境）。
URL 编码：如果图片路径中包含特殊字符（如空格），请确保在构建 URL 时进行适当的 URL 编码（例如使用 encodeURIComponent()），以避免请求失败。

图片加载状态与错误处理： Image 组件提供了 onLoad、onError 等回调函数，可以用于处理图片加载成功或失败的场景。例如，可以在图片加载失败时显示一个占位符图片。

<Image 
    style={styles.image} 
    source={{ uri: fullImageUrl }} 
    onError={(e) => console.log('Image loading error:', e.nativeEvent.error)}
    defaultSource={require('../assets/placeholder.png')} // 加载失败或未加载时显示的图片
/>

登录后复制

缓存：React Native 的 Image 组件通常会处理图片缓存，以提高性能。对于频繁加载的图片，这可以减少网络请求。
服务器配置：确保你的后端服务器正确配置了静态文件服务，以便 http://192.168.8.103:8080/public/images/... 这样的 URL 能够成功地提供图片文件。

总结

在 React Native 中显示来自 API 的动态图片，核心在于正确理解 Image 组件的 source 属性的工作原理。对于网络图片，务必构建一个完整的、可访问的 HTTP/HTTPS URL。避免将 require() 用于动态路径，也不要将相对文件系统路径直接用于 uri 属性来加载网络资源。通过明确服务器基础 URL 和图片路径片段，并将其正确拼接，可以有效解决动态图片加载和显示的问题。

以上就是React Native 中动态传递图片 Prop 的教程的详细内容，更多请关注php中文网其它相关文章！