React Native项目中获取poster_path并拼接至Image组件uri的实现方法

首先，我注意到你代码里有个小拼写错误——在MovieBox的参数里把poster_path写成了poster_patch，这会导致你拿不到正确的海报路径值，先把这个修正过来！

接下来，按照以下步骤调整你的代码就能实现需求：

步骤1：修正MovieBox的参数拼写 #

在MovieBox.js里，把接收的prop名称从poster_patch改成正确的poster_path：

function MovieBox ({title, poster_path,vote_average,release_date,overview}){
  // ... 其余代码保持不变
}

步骤2：拼接完整的图片URI #

接下来在Image组件的uri里直接拼接API_IMG和poster_path就可以了。不过为了避免poster_path为空时出现加载错误，建议加个容错判断：

<Image 
  source={{
    uri: poster_path ? `${API_IMG}${poster_path}` : '' // 空字符串会让Image组件不显示，你也可以换成自己的默认占位图地址
  }}
  style={styles.tinyLogo}
/>

如果不想显示空的Image组件，也可以改成条件渲染：

{poster_path && (
  <Image 
    source={{ uri: `${API_IMG}${poster_path}` }}
    style={styles.tinyLogo}
  />
)}

步骤3：验证数据传递是否正常 #

你当前Top.js里的movies.map((movieReq)=><MovieBox key ={movieReq.id} {...movieReq}/>)写法是没问题的，解构赋值会自动把电影对象里的poster_path字段传给MovieBox。如果不确定是否拿到值，可以在MovieBox里加个日志验证：

function MovieBox ({title, poster_path,vote_average,release_date,overview}){
  console.log('当前电影的海报路径：', poster_path);
  // ... 其余代码
}

这样调整之后，你的Image组件就能正确加载每个电影的海报图啦！

备注：内容来源于stack exchange，提问作者v4d3rinho