Skip to content

Instantly share code, notes, and snippets.

@h-sakano
Last active January 16, 2018 11:26
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save h-sakano/21cb8c4fab958c30871934033b7af27b to your computer and use it in GitHub Desktop.
Save h-sakano/21cb8c4fab958c30871934033b7af27b to your computer and use it in GitHub Desktop.
react-native-cameraを使用する ref: https://qiita.com/h-sakano/items/00250f55b2370b8c6f4c
<uses-permission android:name="android.permission.CAMERA" />
# 静止画だけでなくムービも取るようなアプリなら以下も追記
<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" />
import React, { Component } from 'react';
import {
Alert,
Button,
Platform,
StyleSheet,
Text,
TextInput,
View
} from 'react-native';
import Camera from 'react-native-camera';
. . .
export default class App extends Component {
static navigationOptions = {
title: '撮影する',
};
render() {
return (
<View style={styles.container}>
<Camera
ref={(cam) => {
this.camera = cam;
}}
onBarCodeRead={this.onBarCodeRead.bind(this)}
style={styles.preview}
aspect={Camera.constants.Aspect.fill}>
<Text style={styles.capture} onPress={this.takePicture.bind(this)}>[CAPTURE]</Text>
</Camera>
</View>
);
}
onBarCodeRead(e) {
console.log(
"Barcode Found!",
"Type: " + e.type + "\nData: " + e.data
);
}
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,
justifyContent: 'center',
},
preview: {
flex: 1,
justifyContent: 'flex-end',
alignItems: 'center'
},
capture: {
flex: 0,
backgroundColor: '#fff',
borderRadius: 5,
color: '#000',
padding: 10,
margin: 40
}
})
$ cd /path/to/projectRoot
$ npm install react-native-camera --save
$ react-native link react-native-camera
allprojects {
repositories {
. . .
maven {
url 'https://maven.google.com'
}
maven { url "https://jitpack.io" }
}
}
<key>NSCameraUsageDescription</key>
<string>Your message to user when the camera is accessed for the first time</string>
<!-- Include this only if you are planning to use the camera roll -->
<key>NSPhotoLibraryUsageDescription</key>
<string>Your message to user when the photo library is accessed for the first time</string>
<key>NSPhotoLibraryAddUsageDescription</key>
<string>Your message to user when the photo library is accessed for the first time</string>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment