如何使用 Flickr api 使用 React native 制作图片库

Question

我已经用虚拟数据制作了一个画廊应用程序，现在我想使用 flickr 图像数据 但不知道如何使用这个 flickr api 并使用它获取数据。

我想从 flickr 网站的探索选项卡中获取 flickr “最近的照片” 在我的画廊中使用

这是我目前用于虚拟数据的数据文件的导入语句

let data = require('../Data.json')

这是通过 FlatList 实现的

  <FlatList
        horizontal={false}
        numColumns={3}
        data={data}
        renderItem={({ item }) => (
           
        <TouchableOpacity
          
            onPress={() => navigation.navigate("GalleryPhoto",item)}
          >
                 <View style={{flex:1}}>
        
          <Image
                source={{ uri: item.photo }}
                style={{ width: 140, height: 140 }}
          />
    
            </View>
          
          
          </TouchableOpacity>

这是代码的 github 存储库 https://github.com/adiruv/GalleryAppReactNative

Answer 1

1。注册闪烁。

• 访问 Flicker 网站并注册。
• 注册页面：https://identity.flickr.com/sign-up

2。然后申请API key。

• https://www.flickr.com/services/apps/create/apply/

3。使用包含您的 API 密钥的参数创建请求 URL。

• 创建 URL 以搜索图像。

const yourApiKey = 'your api comes here';

const data = {
  method: 'flickr.photos.search',
  api_key: yourApiKey,
  text: 'cat', // Search Text
  sort: 'interestingness-desc',
  per_page: 12,
  license: '4',
  extras: 'owner_name,license',
  format: 'json',
  nojsoncallback: 1,
};

const parameters = new URLSearchParams(data);

const url = `https://api.flickr.com/services/rest/?${parameters}`;
console.log(url);

4。使用该 URL 发出请求。

const url = `https://api.flickr.com/services/rest/?${parameters}`;

axios.get(url)
  .then(response => response.json())
  .then(data => {
    // We will impliment something later...
  });

5。从 API 响应创建 ImageURL。

• 通过上述请求，您只能获取照片的元数据。
• 所以需要创建ImageURL（image source url）来实际显示图片。
• 还要检查大小后缀以配置图像的大小：https://www.flickr.com/services/api/misc.urls.html

const getFlickrImageURL = (photo, size) => {
  let url = `https://farm${photo.farm}.staticflickr.com/${photo.server}/${photo.id}_${
    photo.secret
  }`;
  if (size) {
    // Configure image size
    url += `_${size}`;
  }
  url += '.jpg';
  return url;
};

const url = `https://api.flickr.com/services/rest/?${parameters}`;

axios.get(url)
  .then(response => response.json())
  .then(data => (
    // get an array of image-url
    data.photos.photo.map((photo) => {
      return getFlickrImageURL(photo, 'q');
    })
  ));

6。显示图片

• 现在您已经获得了来自 flicker API 的 imageURL 数组。
• 您可以循环遍历数组并根据需要显示它。