react-native-camera调用实现拍照

最新推荐文章于 2025-06-05 09:03:20 发布

keen_zuxwang

最新推荐文章于 2025-06-05 09:03:20 发布

阅读量9.4k

点赞数

CC 4.0 BY-SA版权

分类专栏： react native 文章标签： react-native camera

本文链接：https://blog.youkuaiyun.com/keen_zuxwang/article/details/71436493

react native 专栏收录该内容

8 篇文章

订阅专栏

本文详细介绍了如何使用 React Native 在 Android 平台上集成摄像头组件，并提供了从项目初始化到功能实现的完整步骤。涵盖了命令行创建项目、安装 react-native-camera 组件、配置 Android 工程及权限设置等关键环节。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

react-native-camera调用实现拍照

demo: https://github.com/wangzuxing/myrncamera2

命令行创建项目工程、安装、关联组件

react-native init myrncamera2
cd myrncamera2
// A Camera component： https://github.com/lwansbrough/react-native-camera
npm install react-native-camera --save 
// link组件
react-native link react-native-camera

配置android工程
首先在android目录下加入local.properties(命令行创建工程，默认不包含该文件，指定android工程sdk目录sdk.dir)

a、android/settings.gradle 中添加：

include ':react-native-camera'
project(':react-native-camera').projectDir = new File(rootProject.projectDir,'../node_modules/react-native-camera/android')

b、android/app/build.gradle 中添加：

dependencies {
    compile project(':react-native-camera') // 添加
    compile fileTree(dir: "libs", include: ["*.jar"])
    compile "com.android.support:appcompat-v7:23.0.1"
    compile "com.facebook.react:react-native:+"  // From node_modules
}

c、android/app/src/main/AndroidManifest.xml 中添加：
访问权限：

<uses-permission android:name="android.permission.RECORD_AUDIO"/>
<uses-permission android:name="android.permission.RECORD_VIDEO"/>
<uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE" />
<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />

b、android/app/src/main/java/[…]/MainApplication.java 中添加：

import com.lwansbrough.RCTCamera.RCTCameraPackage; //添加

    @Override
    protected List<ReactPackage> getPackages() {
      return Arrays.<ReactPackage>asList(
          new MainReactPackage(),
          new RCTCameraPackage() // 添加
      );
    }

4、index.android.js 添加功能实现(导入相关功能组件)：

'use strict';
import React, { Component } from 'react';
import {
  AppRegistry,
  Dimensions,
  StyleSheet,
  Text,
  TouchableHighlight,
  View
} from 'react-native';

import Camera from 'react-native-camera';

class BadInstagramCloneApp extends Component {
  render() {
    return (
      <View style={styles.container}>
        <Camera
          ref={(cam) => {
            this.camera = cam;
          }}
          style={styles.preview}
          aspect={Camera.constants.Aspect.fill}>
          <Text style={styles.capture} onPress={this.takePicture.bind(this)}>[CAPTURE]</Text>
        </Camera>
      </View>
    );
  }

  takePicture() {
    const options = {};
    //options.location = ...
    this.camera.capture({metadata: options})
      .then((data) => console.log(data))
      .catch(err => console.error(err));
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    flexDirection: 'row',
  },
  preview: {
    flex: 1,
    justifyContent: 'flex-end',
    alignItems: 'center'
  },
  capture: {
    flex: 0,
    backgroundColor: '#fff',
    borderRadius: 5,
    color: '#000',
    padding: 10,
    margin: 40
  }
});

AppRegistry.registerComponent('myrncamera2', () => BadInstagramCloneApp);