Camera preview nu este afisata in body-ul aplicatiei

react-native
(Rada Alin Mihai) #1

Salut. Am o problema cu o aplicatie in react native. Am explicat problema aici si nu am primit niciun raspuns pe stackoverflow :))) si nu imi dau seama de ce

(Eduard-Dan Stanescu) #2

Nu trebuia sa faci un constructor pentru clasa CameraApp ca sa poti folosi this in functia componentWillMount() ?

Nu trebuia folosit componentDidMount() ?

(Rada Alin Mihai) #3

Din cate vazusem in documentatia de la cei de la expo ei nu au folosit constructorul si am crezut ca nu este nevoie de el, dar o sa incerc si cu constructorul si o sa folosesc componentDidMount. Revin cu rezultate

(Rada Alin Mihai) #4

Am incercat si cum ai zis tu si tot asa e, practic imi apare ecranul alb si nu arata ce vede camera telefonului desii am dat voie aplicatiei sa foloseasca camera

(Eduard-Dan Stanescu) #5

Editeaza Camera.js :

import React, { Component } from 'react';
import { View, Text } from 'react-native';
import { Camera, Permissions } from 'expo';

export default class CameraApp extends Component {
    state = {
        flash: 'off',
        zoom: 0,
        autoFocus: 'on',
        type: 'back',
        whiteBalance: 'auto',
        ratio: '16:9',
        ratios: [],
        barcodeScanning: false,
        faceDetecting: false,
        faces: [],
        newPhotos: false,
        permissionsGranted: false,
        pictureSize: undefined,
        pictureSizes: [],
        pictureSizeId: 0,
        showGallery: false,
        showMoreOptions: false,
    };

    async componentWillMount() {
        const { status } = await Permissions.askAsync(Permissions.CAMERA);
        this.setState({ permissionsGranted: status === 'granted' });
    }

    render() {
        const { hasCameraPermission } = this.state;
        if(hasCameraPermission === null) {
            return <Text>Hello</Text>;
        } else if(hasCameraPermission === false) {
            return <Text>No access to camera</Text>;
        } else {
            return (
                <View style={{flex: 1, flexDirection: 'row'}}>
                    <Camera type={this.state.type} style={{flex: 1}}/>
                </View>
            );
        }
    }
}

Demo:

(Rada Alin Mihai) #6

Am rezolvat până la urmă, am setat width și height pe componenta camerei și a funcționat. Mulțumesc oricum!