2

嗨，我有以下课程，我试图从相机胶卷中获取照片并显示它。

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 得到解决后才有效。

4

3 回答 3

5

所以我解决了这个问题。我的问题的主要原因是我没有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;
于 2016-09-07T19:39:18.163 回答
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）

于 2016-09-07T18:25:27.233 回答
0

一种方法是使用 aListView而不是 aScrollview因为您可以使用 a 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);
  });
}

这样，您呈现一个空列表（以及良好 UX 的加载状态），然后一旦完成获取，您将数据设置在ListView.

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

于 2016-09-07T19:49:14.147 回答