Last active
January 16, 2018 11:26
-
-
Save h-sakano/21cb8c4fab958c30871934033b7af27b to your computer and use it in GitHub Desktop.
react-native-cameraを使用する ref: https://qiita.com/h-sakano/items/00250f55b2370b8c6f4c
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<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" /> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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 | |
} | |
}) |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
$ cd /path/to/projectRoot | |
$ npm install react-native-camera --save | |
$ react-native link react-native-camera |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
allprojects { | |
repositories { | |
. . . | |
maven { | |
url 'https://maven.google.com' | |
} | |
maven { url "https://jitpack.io" } | |
} | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<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