如何访问相机 - React Native

问题描述

这应该包含在 react-native API 中，但我似乎找不到任何开箱即用的 API.

This should be included in the react-native APIs but I cannot seem to find any API included out of the box.

我想通过单击按钮打开相机.我可以看到一些仅适用于 iOS 的 API，但 react-native 应该可以实现跨平台.

I want to open up the camera on the click of a button. I can see some APIs just for iOS but react-native should make things cross-platform.

有谁知道如何使用 react-native 访问相机(不是图库)?

Does anyone know how to access the camera (not the gallery) using react-native?

推荐答案

您可能喜欢使用 react-native-camera 模块.

You might like to use react-native-camera module for this.

以下是该库的示例用法:

Here's an example usage of the library:

'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('BadInstagramCloneApp', () => BadInstagramCloneApp);

这篇关于如何访问相机 - React Native的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！