Dacă nu sunteți familiarizați cu expo, este un client care vă ajută să creați aplicații React Native cu o complexitate mai mică a construcției. De asemenea, vă ajută să faceți față stresului instalării și configurării mediului dvs. pentru a rula React Native.

În acest tutorial, vom construi o aplicație simplă pentru cameră, în care utilizatorul poate face fotografii, poate vedea previzualizările imaginilor, poate folosi modul bliț și poate comuta între camerele frontale și cele din spate.

Condiții prealabile

Expo nu necesită mult pentru a începe să construiți prima aplicație React Native. Puteți afla mai multe despre instalare expo și expo-cli aici în documente.

Notă: în acest tutorial, voi folosi macOS și iOS. Puteți utiliza și Android, nu există prea multe diferențe atunci când utilizați expo în acest moment.

Puteți instala expo și expo-cli la nivel global executând următoarea comandă:

npm install --global expo-cli

Expo necesită Nodejs pentru a fugi. Puteți rula cea mai recentă versiune pe site-ul oficial Aici.

Noțiuni de bază

După ce ați instalat Expo și Nodejs, puteți începe bootstrapparea unui nou proiect Expo cu comanda de mai jos:

expo init expo-camera-app

Cum se instalează pachetele și se execută aplicația

Expo ne oferă o aplicație client în care putem rula și vedea previzualizarea aplicației pe care o construim. Este disponibil pe ambele Magazin de aplicații și Google Play a descărca.

Aceasta este interfața aplicației.

Cum se creeaza o aplicatie pentru camera cu Expo si

Cum se inițiază un proiect expo

Accesați directorul aplicației și rulați aplicația.

cd expo-camera-app

Vi se vor pune câteva întrebări pentru a selecta șablonul implicit pentru aplicație. În acest tutorial selectăm pur și simplu o opțiune goală (TypeScript), dar din nou sunteți liber să alegeți ceea ce este potrivit pentru dvs.

Cum se creeaza o aplicatie pentru camera cu Expo si

Rulați aplicația

După lansarea proiectului, putem rula aplicația cu expo run

1612182248 676 Cum se creeaza o aplicatie pentru camera cu Expo si

Aceasta va deschide o fereastră în browserul dvs. unde puteți vedea jurnalele. De asemenea, va genera un cod QR pe ​​care îl puteți scana pentru a rula aplicația pe dispozitiv.

Lucrul bun despre expo este că nu este nevoie să instalați și să configurați simulatoarele pentru a rula aplicația. Vă oferă în continuare opțiunea de a rula expo pe simulator, dar trebuie să instalați și să configurați singur simulatorul.

Înapoi la aplicația noastră. Presupunând că ați rulat cu succes aplicația pe dispozitiv, acesta va fi ecranul implicit:

1612182248 279 Cum se creeaza o aplicatie pentru camera cu Expo si

Deschideți directorul aplicației în editorul de cod preferat. eu folosesc Cod VS.

App.tsx va arăta astfel:

import {StatusBar} from 'expo-status-bar'
import React from 'react'
import {StyleSheet, Text, View} from 'react-native'

export default function App() {
  return (
    <View style={styles.container}>
      <Text>Open up App.tsx to start working on your app!</Text>
      <StatusBar style="auto" />
    </View>
  )
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center'
  }
})

Cum să creați interfața de utilizare

După ce proiectul rulează, acum este timpul să începeți să creați o interfață de utilizare.

Instalați camera expo

Următorul pas este instalarea camera expo, asa:

expo install expo-camera

Vom crea o interfață UI simplă, care va permite utilizatorului să înceapă procesul de utilizare a camerei.

1612182248 143 Cum se creeaza o aplicatie pentru camera cu Expo si
import {StatusBar} from 'expo-status-bar'
import React from 'react'
import {StyleSheet, Text, View, TouchableOpacity} from 'react-native'

export default function App() {
  return (
    <View style={styles.container}>
      <View
        style={{
          flex: 1,
          backgroundColor: '#fff',
          justifyContent: 'center',
          alignItems: 'center'
        }}
      >
        <TouchableOpacity
          style={{
            width: 130,
            borderRadius: 4,
            backgroundColor: '#14274e',
            flexDirection: 'row',
            justifyContent: 'center',
            alignItems: 'center',
            height: 40
          }}
        >
          <Text
            style={{
              color: '#fff',
              fontWeight: 'bold',
              textAlign: 'center'
            }}
          >
            Take picture
          </Text>
        </TouchableOpacity>
      </View>

      <StatusBar style="auto" />
    </View>
  )
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center'
  }
})

Este o interfață simplă: importăm TouchableOpacity pentru buton și faceți un stil simplu. Dacă vă întrebați cum funcționează stilul în React Native, puteți consulta cele două articole aici:

Acum trebuie să folosim un useState cârlig pentru a gestiona starea și a afișa vizualizarea camerei când utilizatorul apasă pe fa poza buton.

  <TouchableOpacity
        onPress={__startCamera}
          style={{
            width: 130,
            borderRadius: 4,
            backgroundColor: '#14274e',
            flexDirection: 'row',
            justifyContent: 'center',
            alignItems: 'center',
            height: 40
          }}
        >
          <Text
            style={{
              color: '#fff',
              fontWeight: 'bold',
              textAlign: 'center'
            }}
          >
            Take picture
          </Text>
        </TouchableOpacity>
  const [startCamera,setStartCamera] = React.useState(false)

const __startCamera = ()=>{

}

Există două lucruri importante pe care trebuie să le facem atunci când utilizatorul apasă butonul:

  • Solicitați permisiunea de a accesa camera. În dezvoltarea mobilă, accesarea multor API-uri native și funcții mobile este deseori restricționată de permisiunile utilizatorului și de confidențialitate. Este doar ceva cu care trebuie să te obișnuiești atunci când dezvolți aplicații mobile.
  • Schimbați starea și prezentați camera.

Să importăm modulul camerei de la expo-camera cu această comandă:

import {Camera} from 'expo-camera'

Și adăugați vizualizarea camerei, astfel:

    <Camera
    style={{flex: 1,width:"100%"}}
    ref={(r) => {
    camera = r
    }}
    ></Camera>

Putem folosi ref pentru a accesa metodele camerei:

let camera: Camera

Cand take picture este apăsat butonul __startCamera funcția va fi numită:

  const __startCamera = async () => {
    const {status} = await Camera.requestPermissionsAsync()
 if(status === 'granted'){
   // do something

 }else{
   Alert.alert("Access denied")
 }

Funcția va cere mai întâi permisiunea. Dacă utilizatorul acordă acces la cameră, putem continua și deschide camera. Dacă nu, afișăm o alertă simplă.

Adăugați componenta camerei

Să afișăm camera atunci când utilizatorul acordă acces la camera dispozitivului.

  const __startCamera = async () => {
    const {status} = await Camera.requestPermissionsAsync()
    if (status === 'granted') {
      // start the camera
      setStartCamera(true)
    } else {
      Alert.alert('Access denied')
    }
  }

Trebuie să facem câteva modificări în interfața de utilizare și să adăugăm o redare condiționată. Afișăm camera numai atunci când utilizatorul o solicită, în caz contrar afișăm ecranul implicit.

  {startCamera ? (
        <Camera
          style={{flex: 1,width:"100%"}}
          ref={(r) => {
            camera = r
          }}
        ></Camera>
      ) : (
        <View
          style={{
            flex: 1,
            backgroundColor: '#fff',
            justifyContent: 'center',
            alignItems: 'center'
          }}
        >
          <TouchableOpacity
            onPress={__startCamera}
            style={{
              width: 130,
              borderRadius: 4,
              backgroundColor: '#14274e',
              flexDirection: 'row',
              justifyContent: 'center',
              alignItems: 'center',
              height: 40
            }}
          >
            <Text
              style={{
                color: '#fff',
                fontWeight: 'bold',
                textAlign: 'center'
              }}
            >
              Take picture
            </Text>
          </TouchableOpacity>
        </View>
      )}
Cum se creeaza o aplicatie pentru camera cu Expo si

Super, acum trebuie să adăugăm un buton pentru a putea face fotografia reală.

Adăugați butonul de captură

1612182250 6 Cum se creeaza o aplicatie pentru camera cu Expo si

Acesta este un lucru simplu View în interiorul vizualizării camerei care are o poziție absolută. Deci, ne asigurăm că este întotdeauna pe partea superioară a camerei.

    <View
        style={{
        position: 'absolute',
        bottom: 0,
        flexDirection: 'row',
        flex: 1,
        width: '100%',
        padding: 20,
        justifyContent: 'space-between'
        }}
      >
        <View
        style={{
        alignSelf: 'center',
        flex: 1,
        alignItems: 'center'
        }}
        >
            <TouchableOpacity
            onPress={__takePicture}
            style={{
            width: 70,
            height: 70,
            bottom: 0,
            borderRadius: 50,
            backgroundColor: '#fff'
            }}
            />
    </View>
    </View>

Cum să faci o fotografie

Aplicația ar trebui să facă o fotografie atunci când butonul de captare este apăsat. Această funcție va arăta ca cea de mai jos:

  const __takePicture = async () => {
    if (!camera) return
    const photo = await camera.takePictureAsync()
   
  }

Mai întâi, verificăm dacă avem acces la Camera folosind componenta ref:

  if (!camera) return
  // if the camera is undefined or null, we stop the function execution

Apoi facem poza apelând takePictureAsync metodă. Returnează o promisiune și un obiect care conține detaliile imaginii. Rezultatul va arăta astfel:

Object {
  "height": 4224,
  "uri": "file:///var/mobile/Containers/Data/Application/E6740A15-93AF-4120-BF11-6E8B74AFBF93/Library/Caches/ExponentExperienceData/%2540anonymous%252Fcamera-app-ee0fa3c8-1bb1-4d62-9863-33bf26341c55/Camera/19F0C5DD-7CA6-4043-8D89-AF65A1055C7E.jpg",
  "width": 1952,
}

Ne interesează doar adresa URL a imaginii uri. După ce facem o fotografie, trebuie să afișăm previzualizarea fotografiei și să ascundem vizualizarea camerei. Pentru a face acest lucru, vom folosi două cârlige pentru a schimba starea:

  const [previewVisible, setPreviewVisible] = useState(false)
  const [capturedImage, setCapturedImage] = useState<any>(null)
  const __takePicture = async () => {
    if (!camera) return
    const photo = await camera.takePictureAsync()
    console.log(photo)
    setPreviewVisible(true)
    setCapturedImage(photo)
  }
  • setPreviewVisible pentru a afișa previzualizarea
  • setCapturedImage(photo) pentru a stoca rezultatul obiectului

Apoi afișăm previzualizarea astfel:

  {previewVisible && capturedImage ? (
            <CameraPreview photo={capturedImage} />
          ) : (
            <Camera
              style={{flex: 1}}
              ref={(r) => {
                camera = r
              }}
            >
              <View
                style={{
                  flex: 1,
                  width: '100%',
                  backgroundColor: 'transparent',
                  flexDirection: 'row'
                }}
              >
                <View
                  style={{
                    position: 'absolute',
                    bottom: 0,
                    flexDirection: 'row',
                    flex: 1,
                    width: '100%',
                    padding: 20,
                    justifyContent: 'space-between'
                  }}
                >
                  <View
                    style={{
                      alignSelf: 'center',
                      flex: 1,
                      alignItems: 'center'
                    }}
                  >
                    <TouchableOpacity
                      onPress={__takePicture}
                      style={{
                        width: 70,
                        height: 70,
                        bottom: 0,
                        borderRadius: 50,
                        backgroundColor: '#fff'
                      }}
                    />
                  </View>
                </View>
              </View>
            </Camera>
          )}

CameraPreview componenta arată astfel:

const CameraPreview = ({photo}: any) => {
  console.log('sdsfds', photo)
  return (
    <View
      style={{
        backgroundColor: 'transparent',
        flex: 1,
        width: '100%',
        height: '100%'
      }}
    >
      <ImageBackground
        source={{uri: photo && photo.uri}}
        style={{
          flex: 1
        }}
      />
    </View>
  )
}

Și rezultatul arată astfel:

1612182250 576 Cum se creeaza o aplicatie pentru camera cu Expo si

Cum să faceți din nou o fotografie

Putem adăuga câteva butoane la previzualizare care îi vor permite utilizatorului să efectueze mai multe acțiuni. De exemplu, ar putea să re-facă fotografia sau să o salveze.

1612182250 653 Cum se creeaza o aplicatie pentru camera cu Expo si

Adaugă savePhoto și retakePicture recuzită pentru CameraPreview componentă ca aceasta:

<CameraPreview photo={capturedImage} savePhoto={__savePhoto} retakePicture={__retakePicture} />

Cand Re-take butonul este apăsat, va trebui să ascundem previzualizarea, să eliminăm imaginea curentă și să arătăm camera din nou. Faceți acest lucru cu următorul cod:

  const __retakePicture = () => {
    setCapturedImage(null)
    setPreviewVisible(false)
    __startCamera()
  }
1612182251 594 Cum se creeaza o aplicatie pentru camera cu Expo si

Cum să adăugați alte opțiuni – cameră din spate, bliț și multe altele

expo-camra oferă multe opțiuni pentru personalizarea camerei, cum ar fi FlashMode, setarea tipului camerei (față / spate), zoom, etc.

Cum se adaugă FlashMode

Să adăugăm o opțiune, astfel încât utilizatorul să poată activa și dezactiva FlashMode:

1612182252 559 Cum se creeaza o aplicatie pentru camera cu Expo si

Pur și simplu creăm un mic buton pentru a opri / porni blițul, astfel:

        <TouchableOpacity
            onPress={__handleFlashMode}
            style={{
            position: 'absolute',
            left: '5%',
            top: '10%',
            backgroundColor: flashMode === 'off' ? '#000' : '#fff',
            borderRadius: '50%',
            height: 25,
            width: 25
        }}
        >
            <Text
                style={{
                fontSize: 20
                }}
            >
            ⚡️
            </Text>
        </TouchableOpacity>

Și doar schimbăm starea atunci când butonul este apăsat:

  const [flashMode, setFlashMode] = React.useState('off')
  
   const __handleFlashMode = () => {
    if (flashMode === 'on') {
      setFlashMode('off')
    } else if (flashMode === 'off') {
      setFlashMode('on')
    } else {
      setFlashMode('auto')
    }

  }

Și apoi adăugăm accesorii FlashMode:

    <Camera
    flashMode={flashMode}
    style={{flex: 1}}
    ref={(r) => {
    camera = r
    }}
    ></Camera>

Cum se accesează camera frontală și cea din spate

Vom adăuga un buton care comută între camera din spate și camera frontală.

Putem obține tipul de cameră implicit direct de la modulul camerei, ca mai jos:

  const [cameraType, setCameraType] = React.useState(Camera.Constants.Type.back)

Adăuga type recuzită de genul acesta:

    <Camera
    type={cameraType}
    flashMode={flashMode}
    style={{flex: 1}}
    ref={(r) => {
    camera = r
    }}
    ></Camera>

Și adăugați butonul de comutare:

<TouchableOpacity
    onPress={__switchCamera}
    style={{
    marginTop: 20,
    borderRadius: '50%',
    height: 25,
    width: 25
    }}
   >
       <Text
           style={{
           fontSize: 20
           }}
           >
       {cameraType === 'front' ? '?' : '?'}
       </Text>
</TouchableOpacity>

Și funcția de comutare:

  const __switchCamera = () => {
    if (cameraType === 'back') {
      setCameraType('front')
    } else {
      setCameraType('back')
    }
  }

Iată rezultatul:

1612182254 201 Cum se creeaza o aplicatie pentru camera cu Expo si

Puteți găsi codul sursă complet pe GitHub.

Înfășurându-se

În general, Expo este un instrument uimitor care vă poate economisi mult timp. Vă ajută să începeți construirea directă și vă scutește de durerea configurării mediului.

Uneori este posibil să doriți să creați o extensie nativă și să gestionați utilizarea caracteristicilor native în felul dvs. În acest caz, aș recomanda utilizarea reacționează-nativ CLI, astfel încât să puteți modifica și juca cu codul nativ cu ușurință.

Bună, mă numesc Said Hayani. Am creat subscriere.io pentru a ajuta creatorii, bloggerii și influențatorii să-și dezvolte publicul prin intermediul buletinului informativ.

Alătură-te meu Listă de email-uri dacă sunteți interesat să citiți mai multe despre React Native.