时间戳

首页 > 解决方案 > 如何使用本机反应从相机胶卷中获取随机图像？

android - 如何使用本机反应从相机胶卷中获取随机图像？

问题描述

我有要求，每次单击按钮时都需要获取随机图像。我不希望选择器出现带有图像的相机胶卷，而是应该从相机文件夹中选择随机图像并显示在图像视图中。我遵循了相机胶卷的官方FB教程。请找到如下代码

_handleButtonPress = () => {
   CameraRoll.getPhotos({
       first: 20,
       assetType: 'Photos',
     })
     .then(r => {
       this.setState({ photos: r.edges });
     })
     .catch((err) => {

     });
   };

但是此代码将选择最近单击的图像并显示在选择器中。而不是随机选择图像的uri并显示在imageview中。任何帮助表示赞赏。

问候，沙拉特

标签： androidiosreact-nativecamera-roll

解决方案

设置状态后，您基本上拥有照片和所有必要的元数据：this.setState({ photos: r.edges })

您所要做的就是从那里选择一个随机图像。我是这样做的：

import React, { Component } from 'react';
import {
  StyleSheet,
  View,
  Image,
  CameraRoll,
  Button
} from 'react-native';

export default class App extends Component {
  constructor(props) {
    super(props)

    this.state = {
      img: null
    }
  }

  getRandomImage = () => {
    const fetchParams = {
      first: 25,
    }

    CameraRoll.getPhotos(fetchParams)
      .then(data => {
        const assets = data.edges
        const images = assets.map((asset) => asset.node.image)
        const random = Math.floor(Math.random() * images.length)
        this.setState({
          img: images[random]
        })
      })
      .catch(err => console.log)
  }

  render() {
    return (
      <View style={styles.container}>
        { this.state.img ?
          <Image
            style={styles.image}
            source={{ uri: this.state.img.uri }}
          />
          : null
        }
        <Button title="Get Random Image from CameraRoll" onPress={this.getRandomImage}/>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  },
  image: {
    width: '100%',
    height: '75%',
    margin: 10,
  }
});

推荐阅读