Comment accéder à la caméra - Réagir Natif

Cela devrait être inclus dans la réaction d'Api natives, mais je n'arrive pas à trouver une API inclus hors de la boîte.

Je veux ouvrir l'appareil photo sur le clic d'un bouton. Je peux voir certaines Api pour iOS, mais réagir indigènes devrait rendre les choses de la croix-plate-forme.

Personne ne sait comment accéder à la caméra (pas de la galerie) à l'aide de réagir indigènes?

OriginalL'auteur Virk Bilal | 2017-07-23

  1. 12

    Vous aimeriez l'utiliser réagir-native-caméra module pour cela.

    Voici un exemple d'utilisation de la bibliothèque:

    '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);
    Ce module n'est pas encore réagir indigènes officiel.
    réagir-version native?
    Javascript est une grande communauté. Vous pouvez vérifier si la construction de ce module est de passage ou non. Et de décider si vous souhaitez l'utiliser.
    Il n'est pas "officiel" réagir indigènes de la caméra de la bibliothèque. react-native-camera est la chose la plus proche que pour le moment, avec près de 6K étoiles sur Github. Vous pouvez aussi consulter les react-native-camera-kit: github.com/wix/react-native-camera-kit

    OriginalL'auteur Trishant Pahwa

  2. 0

    J'ai essayé de nombreuses options pour l'appareil photo et de par mon expérience, vous pouvez utiliser réagir natif de l'appareil photo kit qui est alimenté par Wix.
    Voici mon code

    import React from 'react';
import { StyleSheet, Text, View, Alert, ActivityIndicator, PermissionsAndroid } from 'react-native';
import { CameraKitCameraScreen } from 'react-native-camera-kit';
export default class App extends React.Component {
state = {isPermitted:false}
constructor(props) {
super(props);
var that=this;
async function requestCameraPermission() {
try {
const granted = await PermissionsAndroid.request(
PermissionsAndroid.PERMISSIONS.CAMERA,{
'title': 'CameraExample App Camera Permission',
'message': 'CameraExample App needs access to your camera '
}
)
if (granted === PermissionsAndroid.RESULTS.GRANTED) {
requestExternalWritePermission();
} else {
alert("CAMERA permission denied");
}
} catch (err) {
alert("Camera permission err",err);
console.warn(err)
}
}
async function requestExternalWritePermission() {
try {
const granted = await PermissionsAndroid.request(
PermissionsAndroid.PERMISSIONS.WRITE_EXTERNAL_STORAGE,{
'title': 'CameraExample App External Storage Write Permission',
'message': 'CameraExample App needs access to Storage data in your SD Card '
}
)
if (granted === PermissionsAndroid.RESULTS.GRANTED) {
requestExternalReadPermission();
} else {
alert("WRITE_EXTERNAL_STORAGE permission denied");
}
} catch (err) {
alert("Write permission err",err);
console.warn(err)
}
}
async function requestExternalReadPermission() {
try {
const granted = await PermissionsAndroid.request(
PermissionsAndroid.PERMISSIONS.READ_EXTERNAL_STORAGE,{
'title': 'CameraExample App Read Storage Write Permission',
'message': 'CameraExample App needs access to your SD Card '
}
)
if (granted === PermissionsAndroid.RESULTS.GRANTED) {
that.setState({isPermitted:true})
} else {
alert("READ_EXTERNAL_STORAGE permission denied");
}
} catch (err) {
alert("Read permission err",err);
console.warn(err)
}
}
requestCameraPermission();
}
onBottomButtonPressed(event) {
const captureImages = JSON.stringify(event.captureImages);
Alert.alert(
event.type,
captureImages,
[{ text: 'OK', onPress: () => console.log('OK Pressed') }],
{ cancelable: false }
);
}
render() {
if(this.state.isPermitted){
return (
<CameraKitCameraScreen
actions={{ rightButtonText: 'Done', leftButtonText: 'Cancel' }}
onBottomButtonPressed={event => this.onBottomButtonPressed(event)}
flashImages={{
on: require('./assets/flashon.png'),
off: require('./assets/flashoff.png'),
auto: require('./assets/flashauto.png'),
}}
cameraFlipImage={require('./assets/flip.png')}
captureButtonImage={require('./assets/capture.png')}
/>
);
}else{
return (  
<ActivityIndicator />
)
}
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#fff',
alignItems: 'center',
justifyContent: 'center',
},
});

    OriginalL'auteur snehal agrawal

  3. -1

    À Réagir Natif, vous pouvez accéder à la caméra en installant d'abord à l'aide de MNP:
    npm install réagir-native-appareil photo-enregistrer
    réagir indigènes lien réagir-native-caméra

    Ensuite l'utiliser dans votre Composant:

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

    Voir ce dépôt github pour exemple complet:
    https://github.com/lwansbrough/react-native-camera

    OriginalL'auteur Zain Merchant