So erstellen Sie eine Kamera-App mit Expo und React Native

Wenn Sie mit expo nicht vertraut sind, können Sie mit diesem Client React Native-Apps mit weniger Komplexität erstellen. Es hilft Ihnen auch dabei, den Stress bei der Installation und Einrichtung Ihrer Umgebung für die Ausführung von React Native zu bewältigen.

In diesem Tutorial erstellen wir eine einfache Kamera-App, in der der Benutzer Bilder aufnehmen, eine Vorschau seiner Bilder anzeigen, den Blitzmodus verwenden und zwischen der vorderen und der hinteren Kamera wechseln kann.

Voraussetzungen

Für die Erstellung Ihrer ersten React Native-App ist für die Expo nicht viel erforderlich. Weitere Informationen zur Installation von expo und expo-cli finden Sie hier in den Dokumenten.

Hinweis: In diesem Tutorial verwende ich macOS und iOS. Sie können auch Android verwenden, es gibt derzeit keinen großen Unterschied bei der Verwendung von expo.

Sie können expo und expo-cli global installieren, indem Sie den folgenden Befehl ausführen:

npm install --global expo-cli

Expo benötigt Nodejs, um zu laufen. Sie können die neueste Version auf der offiziellen Website hier ausführen.

Loslegen

Nachdem Sie Expo und Nodejs installiert haben, können Sie mit dem folgenden Befehl ein neues Expo-Projekt booten:

expo init expo-camera-app

So installieren Sie die Pakete und führen die App aus

Expo bietet uns eine Client-App, in der wir die Vorschau der von uns erstellten App anzeigen können. Es kann sowohl im App Store als auch bei Google Play heruntergeladen werden.

Dies ist die Oberfläche der App.

So initiieren Sie ein Ausstellungsprojekt

Gehen Sie in das App-Verzeichnis und führen Sie die App aus.

cd expo-camera-app 

Sie werden einige Fragen gestellt, um die Standardvorlage für die App auszuwählen. In diesem Tutorial wählen wir einfach eine leere Option (TypeScript) aus, aber auch hier können Sie frei wählen, was für Sie richtig ist.

Führen Sie die App aus

Nach dem Bootstrapping des Projekts können wir die App mit ausführen expo run

Dies öffnet ein Fenster in Ihrem Browser, in dem Sie die Protokolle sehen können. Außerdem wird ein QR-Code generiert, den Sie scannen können, um die App auf Ihrem Gerät auszuführen.

Das Gute an expo ist, dass Sie die Simulatoren nicht installieren und konfigurieren müssen, um die App auszuführen. Sie haben weiterhin die Möglichkeit, expo auf dem Simulator auszuführen, aber Sie müssen den Simulator selbst installieren und konfigurieren.

Zurück zu unserer App. Angenommen, Sie haben die App erfolgreich auf dem Gerät ausgeführt, ist dies der Standardbildschirm:

Öffnen Sie das App-Verzeichnis in Ihrem bevorzugten Code-Editor. Ich benutze VS Code.

Das App.tsxwird so aussehen:

import {StatusBar} from 'expo-status-bar' import React from 'react' import {StyleSheet, Text, View} from 'react-native' export default function App() { return (  Open up App.tsx to start working on your app!   ) } const styles = StyleSheet.create({ container: { flex: 1, backgroundColor: '#fff', alignItems: 'center', justifyContent: 'center' } }) 

So erstellen Sie die Benutzeroberfläche

Nachdem das Projekt ausgeführt wurde, ist es jetzt an der Zeit, eine Benutzeroberfläche zu erstellen.

Installieren Sie die Expo-Kamera

Der nächste Schritt ist die Installation der Expo-Kamera wie folgt:

expo install expo-camera

Wir werden eine einfache Benutzeroberfläche erstellen, mit der der Benutzer den Prozess der Verwendung der Kamera starten kann.

import {StatusBar} from 'expo-status-bar' import React from 'react' import {StyleSheet, Text, View, TouchableOpacity} from 'react-native' export default function App() { return (     Take picture      ) } const styles = StyleSheet.create({ container: { flex: 1, backgroundColor: '#fff', alignItems: 'center', justifyContent: 'center' } }) 

Es ist eine einfache Benutzeroberfläche: Wir importieren TouchableOpacityfür die Schaltfläche und führen ein einfaches Styling durch. Wenn Sie sich fragen, wie das Styling in React Native funktioniert, können Sie meine beiden Artikel hier lesen:

  • Styling in React Native
  • Flexbox in React Native entmystifizieren

Jetzt müssen wir einen useStateHaken verwenden, um den Status zu verwalten und die Kameraansicht anzuzeigen, wenn der Benutzer die Aufnahmetaste drückt.

   Take picture  
 const [startCamera,setStartCamera] = React.useState(false) const __startCamera = ()=>{ }

Es gibt zwei wichtige Dinge, die wir tun müssen, wenn der Benutzer die Taste drückt:

  • Bitten Sie um Erlaubnis, auf die Kamera zugreifen zu dürfen. In der mobilen Entwicklung wird der Zugriff auf viele native APIs und mobile Funktionen häufig durch die Berechtigungen des Benutzers und die Privatsphäre eingeschränkt. Es ist nur etwas, woran Sie sich bei der Entwicklung mobiler Apps gewöhnen müssen.
  • Change the state and present the camera.

Let's import the camera module from expo-camera with this command:

import {Camera} from 'expo-camera'

And add the camera view, like this:

  { camera = r }} >

We can use ref to access the camera's methods:

let camera: Camera

When the take picture button is pressed the __startCamera function will be called:

 const __startCamera = async () => { const {status} = await Camera.requestPermissionsAsync() if(status === 'granted'){ // do something }else{ Alert.alert("Access denied") }

The function will ask for permission first. If the user grant access to the camera, we can proceed and open the camera. If not, we show a simple alert.

Add the camera component

Let's display the camera when the user grants access to the device's camera.

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

We have to make some changes to the UI and add a conditional rendering. We display the camera only when the user requests it, otherwise we display the default screen.

 {startCamera ? (  { camera = r }} > ) : (    Take picture    )}

Cool, now we need to add a button so we can take the actual picture.

Add the capture button

This is a simple View inside the camera view that has an absolute position. So we make sure that it is always on the top of the camera.

How to take a picture

The app should take a picture when capture button is pressed. That function will look like the below:

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

First, we check that we have access to the Camera component using ref:

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

Then we take the picture by calling the takePictureAsync method. It returns a promise and an object that contains the picture's details. The result will look like this:

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, }

We are only interested in the Picture URL uri. After we take a picture, we have to show the photo preview and hide the camera view. To do that we will use two hooks to change the state:

 const [previewVisible, setPreviewVisible] = useState(false) const [capturedImage, setCapturedImage] = useState(null)
 const __takePicture = async () => { if (!camera) return const photo = await camera.takePictureAsync() console.log(photo) setPreviewVisible(true) setCapturedImage(photo) }
  • setPreviewVisible to show the preview
  • setCapturedImage(photo) to store the object result

Then we display the preview like this:

 {previewVisible && capturedImage ? (  ) : (  { camera = r }} >         )}

The CameraPreview component looks like this:

const CameraPreview = ({photo}: any) => { console.log('sdsfds', photo) return (    ) }

And the result looks like this:

How to re-take a picture

We can add some buttons to the preview that will allow the user to perform more actions. For example, they could re-take the photo or save it.

Add the savePhoto and retakePicture props to the CameraPreview component like this:

When the Re-take button is pressed, we will have to hide the preview, remove the current picture, and show the camera again. Do that with the following code:

 const __retakePicture = () => { setCapturedImage(null) setPreviewVisible(false) __startCamera() }

How to add other options – back camera, flash, and more

expo-camra offers many options for customizing the camera, like FlashMode, setting the Camera type (front/back), zooming, and so on.

How to add FlashMode

Let's add an option so the user can turn FlashMode on and off:

We simply create a small button to switch off/on the flash, like this:

   ⚡️  

And we just change the state when the button is pressed:

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

And then we add FlashMode props:

  { camera = r }} >

How to access the front and the back camera

We will add a button that switches between the back and front camera.

We can get the default camera type directly from the camera module like below:

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

Add type props like this:

  { camera = r }} >

And add the switch button:

  {cameraType === 'front' ? '?' : '?'}  

And switch function:

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

Here is the result:

You can find the full source code on GitHub.

Wrapping up

In general, Expo is an amazing tool that can save you a lot of time. It helps you start building directly and saves you the pain of environment setup.

Manchmal möchten Sie möglicherweise eine native Erweiterung erstellen und native Funktionen auf Ihre eigene Weise verwenden. In diesem Fall würde ich empfehlen, die reaktionsnative CLI zu verwenden, damit Sie nativen Code leicht ändern und damit spielen können.

Hallo, ich heiße Said Hayani. Ich habe subscribi.io erstellt, um Entwicklern, Bloggern und Influencern zu helfen, ihr Publikum durch den Newsletter zu vergrößern.

Treten Sie meiner Mailingliste bei, wenn Sie mehr über React Native erfahren möchten.