Question

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

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

     });
   };

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

此致沙拉斯

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

如何使用react native从camera-roll中获取随机图像？

1 个答案: