如何在与包含图像的文件不同的另一个文件中使用图像源？

Question

我正在尝试在 react native 中使用带有 require 函数或 uri 的图像源，但源将用于调用具有图像的函数，它不适用于我。

这是包含项目结构和图像文件夹的图像。

这是卡片文件代码：

import { View, Image, StyleSheet } from "react-native";
import colors from "../config/colors";
import React from "react";
import BookStoreText from "./BookStoreText";

function Card(title,subtitile,image) {
    return (
      <View style={styles.card}>
        <Image source={image} />
        <BookStoreText>{title}</BookStoreText>
        <BookStoreText>{subtitile}</BookStoreText>
      </View>
    );
}
const styles = StyleSheet.create({
    card:{
        borderRadius:15,
        backgroundColor:colors.white,
        marginBottom:20,
    }
})

export default Card;

这是 app.js 源代码：

//import WelcomeScreen from "./app/screens/WelcomeScreen";
//import colors from "./app/config/colors";
//import ViewImageScreen from "./app/screens/ViewImageScreen";
//import { MaterialCommunityIcons } from "@expo/vector-icons";
//import AppButton from "./app/components/AppButton";
import { View } from "react-native";
import React from "react";
import Card from "./app/components/Card";
function App() {
  return (
    <View
      style={{
        padding: 20,
        paddingTop: 100,
        backgroundColor: "#f8f4f4",
      }}
    >
      <Card
        image={require("./app/assets/chair.jpg")}
      ></Card>
    </View>
  );
}
export default App;

我尝试了什么： 我尝试将 uri 与图像一起使用，而不是使用 require 函数，但它不起作用

Answer 1

我认为您需要像这样解构 Appcard 组件参数中的图像属性：

//notice the curly braces here
    function Card({title,subtitile,image}) {
        return (
          <View style={styles.card}>
            <Image source={image} />
            <BookStoreText>{title}</BookStoreText>
            <BookStoreText>{subtitile}</BookStoreText>
          </View>
        );
    }