Hogyan készítsünk kameraalkalmazást az Expo és a React Native alkalmazással

Programozás

Ha még nem ismeri az expót, akkor ez egy olyan kliens, amely kevesebb összetettséggel segít a React Native alkalmazások elkészítésében. Ez is segít megbirkózni a React Native futtatásához szükséges környezet telepítésével és beállításával.

Ebben az oktatóanyagban egy egyszerű kameraalkalmazást építünk, amelyben a felhasználó képeket készíthet, megtekintheti a képek előnézeteit, használhatja a vakumódot, és válthat az első és a hátsó kamera között.

Előfeltételek

Az Expo nem igényel sokat az első React Native alkalmazás elkészítésének megkezdéséhez. Az expo és az expo-cli telepítéséről itt tudhat meg többet a dokumentációban.

Megjegyzés: ebben az oktatóanyagban macOS-t és iOS-t fogok használni. Használhatja az Androidot is, nincs sok különbség az expo használatakor ekkor.

Az expo és az expo-cli globálisan telepíthető a következő parancs futtatásával:

npm install --global expo-cli

Az Expo futtatásához Nodejs szükséges. A legfrissebb verziót itt futtathatja a hivatalos weboldalon.

Elkezdeni

Az Expo és a Nodejs telepítése után elindíthatja az új Expo projekt indítását az alábbi paranccsal:

expo init expo-camera-app

A csomagok telepítése és az alkalmazás futtatása

Az Expo egy kliens alkalmazást biztosít számunkra, ahol futtathatjuk és megtekinthetjük az épülő alkalmazás előnézetét. Letölthető az App Store-ból és a Google Play-ből is.

Ez az alkalmazás kezelőfelülete.

Hogyan lehet egy expo projektet elindítani

Menjen az alkalmazás könyvtárába, és futtassa az alkalmazást.

cd expo-camera-app

Néhány kérdést fognak feltenni az alkalmazás alapértelmezett sablonjának kiválasztásához. Ebben az oktatóanyagban egyszerűen kiválasztunk egy üres (TypeScript) opciót, de ismét szabadon választhatja ki a megfelelőt.

Futtassa az alkalmazást

A projekt indítása után futtathatjuk az alkalmazást expo run

Ez megnyit egy ablakot a böngészőben, ahol láthatja a naplókat. Ezenkívül generál egy QR-kódot, amelyet beolvasva futtathatja az alkalmazást a készüléken.

Az expo jó tulajdonsága, hogy az alkalmazás futtatásához nem kell telepíteni és konfigurálni a szimulátorokat. Ez még mindig lehetőséget nyújt az expo futtatására a szimulátoron, de egyedül kell telepítenie és konfigurálnia a szimulátort.

Vissza az alkalmazásunkhoz. Feltéve, hogy sikeresen futtatta az alkalmazást az eszközön, ez lesz az alapértelmezett képernyő:

Nyissa meg az alkalmazáskönyvtárat a kedvenc kódszerkesztőben. VS kódot használok.

Az App.tsxígy fog kinézni:

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' } })

Az UI létrehozása

A projekt futtatása után itt az ideje elkezdeni néhány felhasználói felület létrehozását.

Telepítse az expo-kamerát

A következő lépés az expo-camera telepítése, így:

expo install expo-camera

Létrehozunk egy egyszerű felhasználói felületet, amely lehetővé teszi a felhasználó számára a kamera használatának megkezdését.

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' } })

Ez egy egyszerű felhasználói felület: importáljuk TouchableOpacitya gombot, és néhány egyszerű stílust készítünk . Ha kíváncsi vagy, hogyan működik a stílus a React Native-ban, itt megnézheted két cikkemet:

  • Stílus a React Native-ban
  • Demoxifikáló Flexbox a React Native-ban

Most useStatehorgot kell használnunk az állapot kezeléséhez és a kamera nézetének megjelenítéséhez, amikor a felhasználó megnyomja a kép készítése gombot.

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

Két fontos dolgot kell tennünk, amikor a felhasználó megnyomja a gombot:

  • Kérjen engedélyt a kamera eléréséhez. A mobilfejlesztésben sok natív API-hoz és mobilfunkcióhoz való hozzáférést gyakran korlátozza a felhasználó engedélyei és az adatvédelem. Ez csak valami, amit meg kell szoknia a mobilalkalmazások fejlesztésekor.
  • 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.

Néha érdemes létrehozni egy natív kiterjesztést, és a natív funkciók használatával a maga módján kezelni. Ebben az esetben azt javaslom, hogy használja a reakt-natív CLI-t, így könnyedén módosíthatja és lejátszhatja a natív kódot.

Szia, a nevem Said Hayani. Az Subsi.io-t azért hoztam létre, hogy segítsek az alkotóknak, bloggereknek és az influencereknek a hírlevélen keresztül növelni közönségüket.

Csatlakozzon a Levelezőlistámhoz, ha érdekelne többet a React Native-ról.