在React Native中动态传递图片路径作为Prop的指南

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

const ShoeDisplay = (props) => {
    // 定义图片服务器的基URL。建议将其作为配置项或环境变量管理。
    const IMAGE_BASE_URL = 'http://192.168.8.103:8080/';

    // 移除 photoLocation 字符串中的 "../client/" 部分
    // 假设 props.image 的原始格式是 "../client/public/images/..."
    const relativeImagePath = props.image.substring(9); // 结果为 "public/images/1685958934714.jpeg"

    // 拼接基URL和相对路径，形成完整的图片URI
    const fullImageUrl = `${IMAGE_BASE_URL}${relativeImagePath}`;

    return (
        <View style={styles.container}>
            {/* 使用完整的URI加载图片 */}
            <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: {
        // 样式定义
    },
    image: {
        width: 100, // 示例宽度
        height: 100, // 示例高度
        resizeMode: 'contain', // 示例图片缩放模式
    },
    brand: { /* ... */ },
    name: { /* ... */ },
    price: { /* ... */ },
});

export default ShoeDisplay;

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

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

    const fetchData = async () => {
        try {
            const receivedShoes = await fetch(`http://192.168.8.103:8080/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()} // keyExtractor需要字符串
                    renderItem={({ item }) => (
                        <ShoeDisplay
                            brand={item.brand}
                            name={item.name}
                            price={item.price}
                            image={item.photoLocation} // 传递原始 photoLocation
                        />
                    )}
                />
            )}
            <StatusBar style="auto" />
        </View>
    );
};

const styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: '#fff',
        alignItems: 'center',
        justifyContent: 'center',
        paddingTop: StatusBar.currentHeight || 0, // 适配安卓刘海屏
    },
});

export default HomeScreen;

// assets/images.js
const localImages = {
  'image1.jpeg': require('./image1.jpeg'),
  'image2.jpeg': require('./image2.jpeg'),
  // ...为所有可能的图片路径添加 require 语句
  '1685958934714.jpeg': require('./public/images/1685958934714.jpeg'), // 假设图片在此路径
};

export default localImages;

// ShoeDisplay.js
import localImages from './assets/images'; // 导入图片映射

const ShoeDisplay = (props) => {
    // 假设 props.image 此时是文件名，例如 "1685958934714.jpeg"
    // 或者你需要从 props.image 中提取文件名
    const filename = props.image.split('/').pop(); // 提取文件名

    return (
        <View>
            <Image source={localImages[filename]} />
            {/* ...其他内容 */}
        </View>
    );
};