使用 React Native 访问相机胶卷

2020-09-03 08:00:00 · 飞浪

本指南填补了 React Native 文档中关于拍照、访问 iOS 相机胶卷、身份验证等方面的空白。

介绍

在学习 React Native 时，我们发现大多数问题都是在尝试实现拍照、从移动设备访问照片、聊天、身份验证等功能时遇到的。这些问题有点难以解决，因为 React Native 文档对这些概念的解释不太好。因此，我们必须使用库来实现上述任何功能。

在本指南中，我们将重点介绍使用 React Native API 实现的功能。本指南将帮助您实现用于访问设备上的图片的相机胶卷 API。您也可以查看官方 React Native 文档。

设置 React Native

对于刚开始构建 React Native 应用的人来说，这应该是一份相当简单的入门指南。我们将为 IOS 构建应用，因此设置是根据该平台进行的。我们可以访问 React Native 网站并按照步骤使用本机代码构建项目。

另外，为了快速设置，我们可以使用 create-react-native-app。

现在，应用程序应该可以在模拟器或 iPhone 设备上启动并运行。文件夹结构如下所示。我们有一个包含以下三个组件的组件文件夹：

CamScreen.js-在这里可以添加图片按钮并访问相机胶卷。
ViewPictures.js-显示来自您的iPhone的图片。
SelectedPicture.js-显示选定的图片。

我们的 index.ios.js 中有样板代码。它看起来应该像这样：

index.ios.js

      import React, { Component } from 'react';
import {
  AppRegistry,
  StyleSheet,
  Text,
  View
} from 'react-native';
import CamScreen from './component/CamScreen';

export default class camRollExample extends Component {
  render() {
    return (
      <CamScreen/>
    );
  }
}

AppRegistry.registerComponent('camRollExample', () => camRollExample);
    

在CamScreen.js中，我们有一个简单的界面，其中有添加图片按钮，我们还从React Native导入了CameraRoll模块。

CamScreen.js

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

class CamScreen extends Component {

  render() {
    return (
      <View style={styles.container}>
        <TouchableHighlight>
          <Image
            source={require('../assets/addPicture.png')} />
        </TouchableHighlight>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center'
  }
});

export default CamScreen;
    

访问照片

为了访问照片，我们需要一个点击事件。让我们将onPress属性添加到按钮，并添加一个名为getPicturesFromGallery()的处理方法。

      //...
render() {
  return (
      <View style={styles.container}>
        <TouchableHighlight
          onPress={() => this.getPicturesFromGallery()}>
          <Image
            source={require('../assets/addPicture.png')} />
        </TouchableHighlight>
      </View>
    );
}
    

从图库获取图片（）

      //...
 getPicturesFromGallery() {
    CameraRoll.getPhotos({ first: 5000 })
      .then(res => {
        console.log(res, "images data")
      })
  }
  //...
    

getPhotos({ first: 5000 })中的对象用于指定我们要从图库中获取的图像数量。运行应用程序时，我们会遇到错误：

“无法读取未定义的属性‘getPhotos’”

发生上述错误是因为相机胶卷库尚未添加或链接到 Xcode 中的构建阶段。要修复此错误，我们将：

进入我们的项目目录
打开IOS目录
导航到扩展名为 .xcodeproj 的文件。在我们的例子中，它应该是 camRollExample.xcodeproj
在 Xcode 中打开此文件。

接下来，我们应该将项目目录中的 RCTCamRoll.xcodeproj 拖到 Xcode 中。

我们将 RCTCamRoll.xcodeproj 文件拖到 Xcode 中的库文件中。然后我们可以点击位于 Xcode 右上角的Build Phases 。让我们点击Link Binary With Libraries旁边的下拉菜单，然后点击+号以添加 libRCTCamRoll.a。

然后，我们可以运行构建并重新启动我们的模拟器或设备。图像对象应该在我们的日志中可见。要检查图像，我们需要在图像对象中包含 uri。这是 CameraRoll.js 的更新版本。

CameraRoll.js

      //...
import ViewPictures from './ViewPictures';

class CamScreen extends Component {

  state = {
    showPhotoGallery: false,
    pictureArray: []
  }

  getPicturesFromGallery() {
    CameraRoll.getPhotos({ first: 5000})
      .then(res => {
        let pictureArray = res.edges;
        this.setState({ showPhotoGallery: true, pictureArray: pictureArray })
      })
  }

  render() {
    if (this.state.showPhotoGallery) {
      return (
        <ViewPictures
          pictureArray={this.state.pictureArray} />
      )
    }
    return (
      <View style={styles.container}>

        <TouchableHighlight
          onPress={() => this.getPicturesFromGallery()}>
          <Image
            source={require('../assets/addPicture.png')} />
        </TouchableHighlight>
      </View>
    );
  }
}
//...
    

在上面的代码片段中，我们只导入了 ViewPictures.js。这用于在列表视图中显示图像。

查看图片.js

      import React, { Component } from 'react';
import {
  Image,
  View,
  ListView,
  StyleSheet,
  Text,
  TouchableHighlight

} from 'react-native';

import SelectedPicture from './SelectedPicture';

class ViewPictures extends Component {
  state = {
    ds: new ListView.DataSource({
      rowHasChanged: (r1, r2) => r1 !== r2
    }),
    showSelectedPicture: false,
    uri: ''
  }

  renderRow(rowData) {
    const { uri } = rowData.node.image;
    return (
      <TouchableHighlight
        onPress={() => this.setState({ showSelectedPicture: true, uri: uri })}>
        <Image
          source={{ uri: rowData.node.image.uri }}
          style={styles.image} />
      </TouchableHighlight>
    )
  }

  render() {
    const { showSelectedPicture, uri } = this.state;

    if (showSelectedPicture) {
      return (
        <SelectedPicture
          uri={uri} />
      )
    }
    return (
      <View style={{ flex: 1 }}>
        <View style={{ alignItems: 'center', marginTop: 15 }}>
          <Text style={{ fontSize: 30, fontWeight: '700' }}>Pick A Picture !</Text>
        </View>
        <ListView
          contentContainerStyle={styles.list}
          dataSource={this.state.ds.cloneWithRows(this.props.pictureArray)}
          renderRow={(rowData) => this.renderRow(rowData)}
          enableEmptySections={true} />
      </View>
    );
  }
}

const styles = StyleSheet.create({
  list: {
    flexDirection: 'row',
    flexWrap: 'wrap'
  },

  image: {
    width: 120,
    height: 130,
    marginLeft: 15,
    marginTop: 15,
    borderRadius: 6,
    borderWidth: 2,
    borderColor: '#efefef'
  }
})

export default ViewPictures;
    

当我们单击或从列表中选择一张图片时，所选的图片将显示在 SelectedPicture.js 组件中。

选定图片.js

      import React from 'react';
import {
  Image,
  View,
  StyleSheet,
  Text,
  TouchableHighlight
} from 'react-native';

const SelectedPicture = (props) => {
  const { uri } = props;
  return (
    <View style={styles.container}>
      <Image
        source={{uri: uri}}
        style={styles.image}/>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center'
  },
  image: {
    height: 300,
    width: 200
  }
});

export default SelectedPicture;
    

结论

在 iPhone 6s 和 iPhone 6s plus 上运行该应用程序后，我们可以将测试扩展到其他设备并验证它在其他平台上的表现。

_{免责声明：本内容来源于第三方作者授权、网友推荐或互联网整理，旨在为广大用户提供学习与参考之用。所有文本和图片版权归原创网站或作者本人所有，其观点并不代表本站立场。如有任何版权侵犯或转载不当之情况，请与我们取得联系，我们将尽快进行相关处理与修改。感谢您的理解与支持！}

_查看原文

技术指南

React框架

阅读全文

使用 React Native 访问相机胶卷

杭州电子商务研究院

4年前 · 面向社会、服务行业、政产学研结合、整合资源、和谐发展

import React, { Component } from 'react'; import { AppRegistry, StyleSheet, Text, View } from 'react-native'; import CamScreen from './component/CamScreen'; export default class camRollExample extends Component { render() { return ( <CamScreen/> ); } } AppRegistry.registerComponent('camRollExample', () => camRollExample);

import React, { Component } from 'react'; import { CameraRoll, Image, StyleSheet, TouchableHighlight, View, } from 'react-native'; class CamScreen extends Component { render() { return ( <View style={styles.container}> <TouchableHighlight> <Image source={require('../assets/addPicture.png')} /> </TouchableHighlight> </View> ); } } const styles = StyleSheet.create({ container: { flex: 1, justifyContent: 'center', alignItems: 'center' } }); export default CamScreen;

//... render() { return ( <View style={styles.container}> <TouchableHighlight onPress={() => this.getPicturesFromGallery()}> <Image source={require('../assets/addPicture.png')} /> </TouchableHighlight> </View> ); }

//... import ViewPictures from './ViewPictures'; class CamScreen extends Component { state = { showPhotoGallery: false, pictureArray: [] } getPicturesFromGallery() { CameraRoll.getPhotos({ first: 5000}) .then(res => { let pictureArray = res.edges; this.setState({ showPhotoGallery: true, pictureArray: pictureArray }) }) } render() { if (this.state.showPhotoGallery) { return ( <ViewPictures pictureArray={this.state.pictureArray} /> ) } return ( <View style={styles.container}> <TouchableHighlight onPress={() => this.getPicturesFromGallery()}> <Image source={require('../assets/addPicture.png')} /> </TouchableHighlight> </View> ); } } //...

import React, { Component } from 'react'; import { Image, View, ListView, StyleSheet, Text, TouchableHighlight } from 'react-native'; import SelectedPicture from './SelectedPicture'; class ViewPictures extends Component { state = { ds: new ListView.DataSource({ rowHasChanged: (r1, r2) => r1 !== r2 }), showSelectedPicture: false, uri: '' } renderRow(rowData) { const { uri } = rowData.node.image; return ( <TouchableHighlight onPress={() => this.setState({ showSelectedPicture: true, uri: uri })}> <Image source={{ uri: rowData.node.image.uri }} style={styles.image} /> </TouchableHighlight> ) } render() { const { showSelectedPicture, uri } = this.state; if (showSelectedPicture) { return ( <SelectedPicture uri={uri} /> ) } return ( <View style={{ flex: 1 }}> <View style={{ alignItems: 'center', marginTop: 15 }}> <Text style={{ fontSize: 30, fontWeight: '700' }}>Pick A Picture !</Text> </View> <ListView contentContainerStyle={styles.list} dataSource={this.state.ds.cloneWithRows(this.props.pictureArray)} renderRow={(rowData) => this.renderRow(rowData)} enableEmptySections={true} /> </View> ); } } const styles = StyleSheet.create({ list: { flexDirection: 'row', flexWrap: 'wrap' }, image: { width: 120, height: 130, marginLeft: 15, marginTop: 15, borderRadius: 6, borderWidth: 2, borderColor: '#efefef' } }) export default ViewPictures;

import React from 'react'; import { Image, View, StyleSheet, Text, TouchableHighlight } from 'react-native'; const SelectedPicture = (props) => { const { uri } = props; return ( <View style={styles.container}> <Image source={{uri: uri}} style={styles.image}/> </View> ); }; const styles = StyleSheet.create({ container: { flex: 1, justifyContent: 'center', alignItems: 'center' }, image: { height: 300, width: 200 } }); export default SelectedPicture;