如何访问相机 - React Native

Vir*_*lal 18 android ios react-native

这应该包含在react-native API中,但我似乎无法找到任何包含在内的API.

我想点击按钮打开相机.我可以看到一些仅适用于iOS的API,但本地反应应该会使事物跨平台.

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

Tri*_*hwa 13

您可能希望使用react-native-camera模块.

以下是该库的示例用法:

'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);
Run Code Online (Sandbox Code Playgroud)

  • 该模块仍然不是 react-native 官方的。 (3认同)
  • @VirkBilal 没有“官方”反应原生相机库。`react-native-camera` 是目前最接近的,在 Github 上有近 6000 颗星。您还可以查看`react-native-camera-kit`:https://github.com/wix/react-native-camera-kit (2认同)
  • 我在使用 React Native 相机时遇到了很多问题,如果我只是写了一个使用默认相机应用程序的意图,我可以节省大约 1 个月的时间 https://github.com/react-native-community/react-native-相机/问题/2478 (2认同)