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

Question

我有一个要求，每次单击按钮时都需要随机获取一张图片。我不希望选择器出现带有图像的相机胶卷，而是应 select 从相机文件夹中编辑随机图像并显示在图像视图中。我已经按照相机胶卷的官方FB教程进行操作。请找到下面的代码

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

     });
   };

但是此代码将 select 最近点击的图像并显示在选择器中。而不是随机 select 图像的 uri 并显示在图像视图中。感谢任何帮助。

此致，沙拉斯

Answer 1

设置状态后，您基本上拥有了照片和所有必要的元数据：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,
  }
});

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

How to fetch random image from camera-roll using react native?

android

ios

camera-roll

react-native