如何在React Native中使用Flickr API实现图片画廊并拉取探索页近期照片

• 第一步：申请Flickr API密钥
  前往Flickr开发者平台申请专属API Key，申请成功后即可获得接口调用必填的密钥参数。
• 第二步：调用探索页对应接口
  Flickr官方提供flickr.interestingness.getList接口，返回内容与Explore板块的近期照片完全匹配，你可以用fetch直接发起GET请求，示例代码如下：

  const fetchFlickrPhotos = async () => {
    // 替换为你自己申请的API Key
    const API_KEY = "YOUR_OWN_API_KEY";
    const response = await fetch(`https://www.flickr.com/services/rest/?method=flickr.interestingness.getList&api_key=${API_KEY}&format=json&nojsoncallback=1&per_page=30`);
    const resData = await response.json();
    return resData.photos.photo;
  }
  

  接口参数说明：
  • format=json指定返回JSON格式数据
  • nojsoncallback=1去掉默认的JSONP回调包裹，直接返回纯JSON
  • per_page指定单次返回的照片数量，可按需调整
• 第三步：格式化数据适配现有代码
  接口返回的单条照片数据不会直接提供可访问的图片直链，需要按照官方规则拼接：https://live.staticflickr.com/{server}/{id}_{secret}_q.jpg，其中q代表返回150150的方形缩略图，刚好适配你现有140140的Image组件尺寸。
  格式转换示例代码：

  const formatData = (rawList) => {
    return rawList.map(item => ({
      id: item.id,
      photo: `https://live.staticflickr.com/${item.server}/${item.id}_${item.secret}_q.jpg`,
      title: item.title
    }))
  }
  

• 第四步：替换原有模拟数据逻辑
  删除原来的模拟数据导入语句let data = require('../Data.json')，改用state存储接口返回的真实数据，在组件加载时触发数据拉取：

  import { useState, useEffect } from 'react';
  
  // 组件内部代码
  const [data, setData] = useState([]);
  
  useEffect(() => {
    const loadGalleryData = async () => {
      const rawPhotoList = await fetchFlickrPhotos();
      const formattedList = formatData(rawPhotoList);
      setData(formattedList);
    }
    loadGalleryData();
  }, []);
  

• 第五步：复用现有渲染逻辑
  你当前写的FlatList渲染、点击跳转逻辑完全不需要修改，格式化后的数据和你之前用的模拟数据结构完全一致，可以直接运行生效。

注意：Flickr免费API密钥有调用频率限制，单小时请求不超过3600次，个人开发测试完全够用。

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