Question

Haven没有注意到有关如何使用React Native的CameraRoll库的示例代码/指南，我发现文档中的示例有点模糊＆＃34;而且令人困惑。

我第一次使用任何API，所以我不完全理解我是如何使用该库的。到目前为止，我已将其导入为：

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

与＆＃34;链接＆＃34;相混淆等等，但据我所知，这应该是我需要做的所有才能使用lib。

并且如何我可以将其用于简单的操作，只需单击按钮即可打开图库，然后让用户选择应在应用中显示的图像。

提前致谢，希望有人有一些代码来澄清这一点。

Answer 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

Answer 2

嗯，你正在寻找的包可能是反应原生图像选择器。它允许您拍摄照片或从您的本机设备库中选择一张照片。

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

回应链接问题。使用以下方法保存包时

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

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

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

反应原生相机卷

2 个答案: