javascript - React-native 从 Camera Roll 和 Camera Roll API 获取所有照片

Question

我正在尝试使用 native CameraRoll.getPhotos API 获取相机胶卷照片。我发现文档不是很好的问题。在 react-native official documentation提到了两个术语 getPhotosReturnChecker 和 getPhotosParamChecker，我可以在其中获取有关此参数的详细信息。

我发现以下对象可以从 bhwgroup blog 传递给 CameraRoll.getPhotos

{
    first: ..., // (required) The number of photos wanted in reverse order of the photo application
    after: ..., // A cursor returned from a previous call to 'getPhotos'
    groupTypes: ..., // Specifies which group types to filter the results to
                     // One of ['Album', 'All', 'Event', 'Faces', 'Library', 'PhotoStream', 'SavedPhotos'(default)]
    groupName: ..., // Specifies filter on group names, like 'Recent Photos' or custom album titles
    assetType: ... // Specifies filter on assetType
                   // One of ['All', 'Videos', 'Photos'(default)]
}

根据这些，它总是首先需要一个参数，该参数指示我们可以从 CameraRoll 获取多少张图片。相反，如果我想要相机胶卷中的所有照片，我该如何获取？

Answer 1

您需要进行一些分页以访问所有照片。基本上，您将它们分块加载，并在每次获取后跟踪您离开的地方。你会想要一个类似这样的状态:

this.state = {
  dataSource: ds.cloneWithRows([]),
  assets: [],
  lastCursor: null,
  noMorePhotos: false,
  loadingMore: false,
};

然后获取类似于这些的函数。此示例假设您使用 ListView 来使用 ListView.DataSource

显示您的照片

tryPhotoLoad() {
  if (!this.state.loadingMore) {
    this.setState({ loadingMore: true }, () => { this.loadPhotos(); });
  }
}

loadPhotos() {
  const fetchParams = {
    first: 35,
    groupTypes: 'SavedPhotos',
    assetType: 'Photos',
  };

  if (Platform.OS === 'android') {
  // not supported in android
    delete fetchParams.groupTypes;
  }

  if (this.state.lastCursor) {
    fetchParams.after = this.state.lastCursor;
  }

  CameraRoll.getPhotos(fetchParams).then((data) => {
    this.appendAssets(data);
  }).catch((e) => {
    console.log(e);
  });
}

appendAssets(data) {
  const assets = data.edges;
  const nextState = {
    loadingMore: false,
  };

  if (!data.page_info.has_next_page) {
    nextState.noMorePhotos = true;
  }

  if (assets.length > 0) {
    nextState.lastCursor = data.page_info.end_cursor;
    nextState.assets = this.state.assets.concat(assets);
    nextState.dataSource = this.state.dataSource.cloneWithRows(
      _.chunk(nextState.assets, 3)
    );
  }

  this.setState(nextState);
}

endReached() {
  if (!this.state.noMorePhotos) {
    this.tryPhotoLoad();
  }
}