React Native中如何跨文件引用图片资源并传递给自定义组件使用

修复方案 #

核心问题1：组件参数接收错误 #

React 函数组件的第一个入参是统一的props对象，你当前的写法把整个props对象赋值给了第一个参数title，后续的subtitile、image参数实际都是undefined，Image组件拿到空的source值自然无法加载图片。
修改Card组件的入参为解构写法即可：

// 原错误写法
// function Card(title,subtitile,image) {
// 修改后写法
function Card({title, subtitle, image}) {

注意你原参数名subtitile存在拼写错误，调用时要保证参数名一致。

核心问题2：Image组件未设置宽高 #

React Native的Image组件不会像Web端那样自动适配图片原始尺寸，必须显式设置宽高，否则默认宽高为0，就算图片路径正确也无法显示。
修改Card组件的Image代码，补充样式：

<Image source={image} style={styles.cardImage} />

在样式表中添加Image的对应样式：

const styles = StyleSheet.create({
    card:{
        borderRadius:15,
        backgroundColor:colors.white,
        marginBottom:20,
        overflow: 'hidden' // 可选，让图片适配卡片圆角
    },
    // 新增图片样式
    cardImage: {
        width: '100%',
        height: 200, // 可根据需求调整高度
        resizeMode: 'cover'
    }
})

可选调整：补充Card调用参数 #

你当前调用Card组件时只传了image参数，如果需要展示文字可以补充title和subtitle：

<Card
  title="示例标题"
  subtitle="示例副标题"
  image={require("./app/assets/chair.jpg")}
/>

URI加载额外注意事项 #

如果使用uri方式加载图片：

• 网络图片必须写成source={{uri: '图片链接'}}的格式，同时Android需要在清单文件中添加网络权限，iOS需要配置ATS白名单
• 本地文件uri需要保证平台对应路径正确，同样需要设置Image宽高

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