Skip to content
Kezdőlap » ActivityIndicator komponens

ActivityIndicator komponens

ActivityIndicator

Az ActivityIndicator segítségével tudunk visszajelzést adni az alkalmazás azon állapotáról, amikor éppen valami történik, folyamatban van.

ActivityIndicator
A képet innét vettem, köszönet érte!

AcrivityIndicator telepítése és használata

Része a react-native csomagnak is, tehát a React Native-val együtt települ. Ha ezt használjuk, akkor csak egy szimpla importra van szükség:

import { ActivityIndicator } from "react-native";

A react-native-paper csomag is tartalmazza. Most ennek használatát mutatom be.

A React Native Paper dokumentációjában fellelhető példa alapján nagyon egyszerű dolgunk van. Mivel az ActivityIndicator a react-native-paper csomag része, úgy először telepíteni kell ezt a csomagot:

yarn add react-native-paper@5.0.0-rc.6

vagy

npm install react-native-paper@5.0.0-rc.6

Ha ezen már túl vagyunk, akkor csak importálni kell néhány dolgot:

import { ActivityIndicator, MD2Colors } from 'react-native-paper';

Aztán tudjuk is használni. Íme egy Loading komponens, ami megjeleníti az ActivityIndicator-t:

const Loading = () => (
    <ActivityIndicator size={50} animating={true} color={MD2Colors.blue300} />
);

Példa styled components és state használatával

Tegyük fel, hogy van valahol egy isLoading state változónk, ami pont azt hivatott jelezni, hogy valami a képernyőn folyamatban van. Valami betöltés éppen zajlik a háttérben. Ekkor az isLoading értéke true. Ezt használjuk fel egy feltételben.

A következő kódrészletnek a jelentése az, hogy ha isLoading === true, akkor csináld azt, ami az && után van:

{isLoading && (
   <LoadingContainer>
     <Loading size={50} animation={true} color={Colors.blue300} />
   </LoadingContainer>
)}

Viszont hol van maga az ActivityIndicator? Az importálás szintén kell:

import { ActivityIndicator, Colors } from 'react-native-paper';

Aztán a fenti kódból látszik, hogy léteznie kell két komponensnek. Az egyik a LoadingContainer, a másik pedig a Loading. Ezeket a styled components segítségével készítettem el. A Loading komponens az maga az ActivityIndicator:

const Loading = styled(ActivityIndicator)`
  margin-left: -25px;
`;

A margin-left: -25px szükséges különben a betöltés jelző kép kissé jobbra csúszva jelenik meg.

A másik styled komponens pedig egy react-native csomagbéli View. Ez tartalmazza a betöltés jelző komponenst:

const LoadingContainer = styled.View`
  position: absolute;
  top: 50%;
  left: 50%;
`;

Ezzel a css formázással igazítjuk a konténer tartalmát pontosan a képernyő közepére.

Címkék: