React Native CameraRoll.getPhotos API 不呈现结果

Question

您好，我有以下 class，我正在尝试从相机胶卷中获取照片并显示它。

class CameraRollProject extends Component {
  constructor(props) {
    super(props);
    this.state = {
     images: []
    };
  }

  componentWillMount() {
    const fetchParams = {
      first: 25,
    };
    CameraRoll.getPhotos(fetchParams, this.storeImages, this.logImageError);
  }

  storeImages(data) {
    const assets = data.edges;
    const images = assets.map((asset) => asset.node.image);
    this.state.images =  images;
  }

  logImageError(err) {
    console.log(err);
  }

  render() {
      return (
        <ScrollView style={styles.container}>
          <View style={styles.imageGrid}>
            { this.state.images.map((image) => <Image style={styles.image} source={{ uri: image.uri }} />) }
          </View>          
        </ScrollView>
      );
  }
};

export default CameraRollProject;

问题是我的渲染函数在我的 CameraRoll.getPhotos 承诺得到解决之前被调用。所以我没有得到任何照片。

为了解决这个问题，我将我的程序更改为以下

render() {
      return CameraRoll.getPhotos(fetchParams, this.storeImages, this.logImageError)
        .then(() => {
          return (
            <ScrollView style={styles.container}>
              <View style={styles.imageGrid}>
                { this.state.images.map((image) => <Image style={styles.image} source={{ uri: image.uri }} />) }
              </View>          
            </ScrollView>
          );
        });
  }

但是这给我以下错误

遇到上述情况我该怎么办？如何确保渲染仅在 CameraRoll.getPhotos 得到解决后才有效。

Answer 1

我认为你应该使用 react-native-image-picker

你有很多参数可以随心所欲地检索图片

  selectPhotoTapped() {
    const options = {
      title: 'Choose a picture',
      cancelButtonTitle: 'Back',
      takePhotoButtonTitle: 'Take a picture...',
      chooseFromLibraryButtonTitle: 'Choose from my pictures..',
      quality: 1,
      maxWidth: 300,
      maxHeight: 300,
      allowsEditing: true,
      mediaType: 'photo',
      storageOptions: {
        skipBackup: true
      }
    }

它比 CameraRollProject 更容易处理，而且文档解释得很好。因为你会做什么，它非常适合。（适用于 iOS 和 Android）

Answer 2

所以我解决了这个问题。我的问题的主要原因是我没有正确使用 CameraRoll.getPhotos 作为 Promise。我在函数内部传递了不正确的参数。为了解决这个问题，我去掉了以下函数

 storeImages(data) {
    const assets = data.edges;
    const images = assets.map((asset) => asset.node.image);
    this.state.images =  images;
  }

  logImageError(err) {
    console.log(err);
  }

并让我的 CameraRoll.getPhotos 像下面这样

CameraRoll.getPhotos({first: 5}).then(
  (data) =>{
    const assets = data.edges
    const images = assets.map((asset) => asset.node.image);
        this.setState({
          isCameraLoaded: true,
          images: images
        })
  },
  (error) => {
     console.warn(error);
  }
);

这是我在 react-native 中从 CameraRoll 获取图片的完整代码，以防有人感兴趣

class CameraRollProject extends Component {
  constructor(props) {
    super(props);
    this.state = {
     images: [],
     isCameraLoaded: false
    };
  }

  componentWillMount() {
    CameraRoll.getPhotos({first: 5}).then(
      (data) =>{
        const assets = data.edges;
        const images = assets.map((asset) => asset.node.image);
        this.setState({
          isCameraLoaded: true,
          images: images
        })
      },
      (error) => {
        console.warn(error);
      }
    );
  }

  render() {
      if (!this.state.isCameraLoaded) {
        return (
          <View>
            <Text>Loading ...</Text>
          </View>
          );
      }
      return (
        <ScrollView style={styles.container}>
          <View style={styles.imageGrid}>
            { this.state.images.map((image) => <Image style={styles.image} source={{ uri: image.uri }} />) }
          </View>          
        </ScrollView>
      );
  }
};

export default CameraRollProject;

Answer 3

一种方法是使用 ListView 而不是 Scrollview，因为您可以使用 datasource。以下是如何执行此操作的示例：

constructor(props) {
  super(props);

  const ds = new ListView.DataSource({ rowHasChanged: (r1, r2) => r1 !== r2 });
  this.state = { dataSource: ds.cloneWithRows([]) };

  this.loadPhotos();
}

loadPhotos() {
  const fetchParams = {
    first: 25,
  };

  CameraRoll.getPhotos(fetchParams).then((data) => {
    this.state.dataSource.cloneWithRows(data.edges);
  }).catch((e) => {
    console.log(e);
  });
}

通过这种方式，您可以呈现一个空列表（以及良好用户体验的加载状态），然后在获取完成后在 ListView 中设置数据。

如果您想坚持使用 ScrollView 和映射的图像，您还需要某种加载状态，直到照片加载。希望这有帮助。

React Native CameraRoll.getPhotos API 不呈现结果

React Native CameraRoll.getPhotos API doesn't render the results

javascript

reactjs

react-native

es6-promise

react-native-component