Skip to content
Kezdőlap » React Native Paper

React Native Paper

A React Native Paper egy több platformot is támogató eszköztár, amivel rengetegféle UI (user interface, azaz felhasználói felület) elemeket tudunk használni, mint gombok, inputok, stb.

Minek ez nekünk? A React Native alapból hoz nekünk egy csomó ilyen elemet beépítve, melyek tehát a react-native csomag részei. Innen kell őket importálni a használat előtt.

Azonban ezek nem igazán vannak dizájnolva. Ez a nemes feladat ránk vár valamelyik stílus készítő eszköz segítségével. A React Native Paper ezt megcsinálja nekünk és sok melót vesz ezzel le a vállunkról. Például már egy egyszerű kereső doboz is elég sok fejfájást okozna, ha mindent nekünk kellene a nulláról dizájnolni. Eltartások, árnyék, ikon, stb.

Telepítés és beállítás

Telepíteni így kell:

npm install react-native-paper

Bár a dokumentáció mindig azt javasolja, hogy a legfrissebbet szedjük le. Így tehát ez is egy valid telepítés lehet:

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

vagy

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

(És persze, ha a dokumentációt említettem, akkor művelődjünk a hivatalosból.)

Ha már a keresőről volt szó, akkor egy Searchbar használata úgy történik, hogy a React Native Paper oldalán rákeresünk, hogy „searchbar” és ő megmutatja nekünk, hogyan kell használni. A legegyszerűbb, funkció nélküli beépítés:

import * as React from 'react';
import { Searchbar } from 'react-native-paper';
//...
<Searchbar />

Gomb ikonok

A gomboknál megjelenő ikonokat ebből a listából lehet kiválasztani: https://materialdesignicons.com/

Hivatalos dokumentáció

https://reactnativepaper.com/