反应原生相机胶卷答案

【问题标题】：React Native Camera Roll反应原生相机胶卷
【发布时间】：2017-01-30 17:01:49
【问题描述】：

没有注意到太多关于如何使用 React Native 中的 CameraRoll 库的示例代码/指南，我发现文档中的示例有点“模糊”和混乱。

我第一次使用任何 API，所以我也不完全理解我应该如何使用该库。到目前为止，我已经像这样导入它：

    import {
  AppRegistry,
  Image,
  StyleSheet,
  TextInput,
  Navigator,
  CameraRoll,
  Alert,
  TouchableHighlight,
  Button,
  Text,
  View
} from 'react-native';

与“链接”等很混淆，但据我所知，这应该是我使用库所需要做的一切。

如何我如何将它用于简单的操作，例如通过单击按钮打开图库并让用户选择应在应用中显示的图像。

在此先感谢，希望有人有一些代码来澄清这一点。

【问题讨论】：

我以前用过这个功能。您是否尝试将此添加到 iOS 或 Android 项目？
@13Leprechauns 两个！我希望 React Native 能够处理跨平台部分？

标签： react-native

【解决方案1】：

这里有一些示例代码，它将从您的相机胶卷中获取前 25 张照片，并将它们显示在 ScrollView 中。我从网上找到的一个例子修改了这个here

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

class CameraRollView extends Component {

  constructor(props) {
    super(props)
    var controls = props.controls
    this.state = {
      images: [],
      selected: '',
      fetchParams: { first: 25 },
      groupTypes: 'SavedPhotos',
    }
    this._storeImages = this._storeImages.bind(this)
    this._logImageError = this._logImageError.bind(this)
    this._selectImage = this._selectImage.bind(this)
  }

  componentDidMount() {
    // get photos from camera roll
    CameraRoll.getPhotos(this.state.fetchParams, this._storeImages, this._logImageError);
  }

  // callback which processes received images from camera roll and stores them in an array
  _storeImages(data) {
    const assets = data.edges;
    const images = assets.map( asset => asset.node.image );
    this.setState({
        images: images,
    });
  }

  _logImageError(err) {
      console.log(err);
  }

  _selectImage(uri) {
    // define whatever you want to happen when an image is selected here
    this.setState({
      selected: uri,
    });
    console.log('Selected image: ', uri);
  }

  render() {
    return (
      <View style={{flex: 1, backgroundColor: 'white'}}>
        <ScrollView style={styles.container}>
            <View style={styles.imageGrid}>
            { this.state.images.map(image => {
              return (
               <TouchableHighlight onPress={() => this._selectImage(image.uri)}>
                 <Image style={styles.image} source={{ uri: image.uri }} />
               </TouchableHighlight>
             );
            })}
            </View>
        </ScrollView>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
      flex: 1,
      backgroundColor: '#F5FCFF',
  },
  imageGrid: {
      flexDirection: 'row',
      flexWrap: 'wrap',
      justifyContent: 'center'
  },
  image: {
      width: 100,
      height: 100,
      margin: 10,
  },
});

export default CameraRollView

【讨论】：

是否可以调出本地图库而不是让自定义场景显示一组图像？我会想象一些在 iOS 和 Android 上调出原生图库的功能？
你知道我能不能得到按“自拍”相册过滤的照片？

【解决方案2】：

嗯，您正在寻找的包可能是 react-native-image-picker。它允许您拍照或从您的本地设备图库中选择一张。

链接：https://github.com/react-community/react-native-image-picker

针对链接问题。当您使用以下方式保存包时：

npm install --save react-native-image-picker

这里发生的是 --save 部分准备要连接到本机 iOS 和 Android 的包依赖项。此链接是使用命令 react-native link 完成的。

在某些情况下，包还需要一些手动链接（例如，此包需要少量原生 iOS 和 Android 配置）

【讨论】：