反应本机相机胶卷

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

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

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

与“链接”等很困惑，但据我所知，这应该是我使用该库所需要做的全部事情。

And how我是否可以将它用于一些简单的事情，例如单击按钮打开图库并让用户选择然后应在应用程序中显示的图像。

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

下面是一些示例代码，它将从相机胶卷中抓取前 25 张照片并将它们显示在ScrollView。我根据网上找到的示例进行了修改here https://thebhwgroup.com/blog/accessing-iphone-camera-roll-images-react-native

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