Question

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

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;

问题是我的Camera函数在我的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

所以我解决了这个问题。我的问题的主要原因是我没有正确使用CameraRoll.getPhotos作为承诺。我在函数内部传递了错误的参数。为了解决这个问题，我摆脱了以下功能

 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);
  }
);

这是我完整的代码，可以从反应本机获取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 2

我认为你应该使用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 3

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

datasource

这样，您可以呈现一个空列表（以及良好UX的加载状态），然后在完成提取后，您可以在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和映射的图像，你还需要某种加载状态，直到照片加载。希望这会有所帮助。

React Native CameraRoll.getPhotos API不呈现结果

3 个答案: