Die folgende Liste enthält nützliche npm-Pakete und Module für React Native, die nachträglich installiert werden können um die App-Funktionalität zu erweitern.
Async Storage
Asynchrones Key-Value Speichersystem. Es wird in Verbindung mit Redux benutzt.
$ npm install @react-native-community/async-storage
Webseiten:
Async Storage: https://www.npmjs.com/package/@react-native-community/async-storage
Async Storage auf Git: https://github.com/react-native-community/async-storage/tree/master
axios
Native ES6 Promise-basierter HTTP-Client für den Browser und Node.js.
$ npm install axios
Webseite: https://www.npmjs.com/package/axios
buffer
Ein Buffer-Modul für den Browser.
$ npm install buffer
Webseite: https://www.npmjs.com/package/buffer
i18next
Internationalisierungs-Framework. Es wird benutzt um Apps in verschiedene Ländersprachen zu übersetzen.
react-i18next ist ein Internationalisierungs-Framework für React und React Native, das auf i18next basiert.
$ npm install --save i18next react-i18next
Webseiten:
i18next: https://www.i18next.com/
react-i18next: https://react.i18next.com/
NativeBase
Komponenten-Bibliothek für die Android– und iOS-Benutzeroberflächen.
$ npm install native-base --save $ npx react-native link
Webseite: https://nativebase.io/
React Navigation
Routing und Navigation für React Native Apps.
react-navigation ist das Kernpaket zur Erstellung von Routen und Navigationen.
react-native-gesture-handler ist ein Benutzeroberflächen-Berührungs- und Bewegungssystem.
react-native-reanimated erweitert das React Native Animationspaket Animated.
react-native-screens stellt der react-navigation verschiedene Screen-Darstellungen wie Stack, Tab, Drawer usw. zur Verfügung.
react-native-safe-area-context dient der Bedienung der SafeArea.
$ npm install react-navigation react-native-gesture-handler react-native-reanimated react-native-screens react-native-safe-area-context
Verlinken auf iOS
cd ios pod install cd ..
Verlinken auf Android
Die react-native-screens Installation vervollständigen, indem die zwei Zeilen in die Sektion dependencies in der Datei android/app/build.gradle hinzugefügt werden.
dependencies { implementation fileTree(dir: "libs", include: ["*.jar"]) implementation "com.facebook.react:react-native:+" // From node_modules implementation 'androidx.appcompat:appcompat:1.1.0-rc01' implementation 'androidx.swiperefreshlayout:swiperefreshlayout:1.1.0-alpha02' if (enableHermes) { def hermesPath = "../../node_modules/hermes-engine/android/"; debugImplementation files(hermesPath + "hermes-debug.aar") releaseImplementation files(hermesPath + "hermes-release.aar") } else { implementation jscFlavor } }
Die react-native-gesture-handler Installation durch die Ergänzung der Datei android/app/src/main/java/com/<projectname>/MainActivity.java abschließen.
package com.reactnativedemo; import com.facebook.react.ReactActivity; import com.facebook.react.ReactActivityDelegate; import com.facebook.react.ReactRootView; import com.swmansion.gesturehandler.react.RNGestureHandlerEnabledRootView; public class MainActivity extends ReactActivity { /** * Returns the name of the main component registered from JavaScript. This is used to schedule * rendering of the component. */ @Override protected String getMainComponentName() { return "ReactNativeDemo"; } @Override protected ReactActivityDelegate createReactActivityDelegate() { return new ReactActivityDelegate(this, getMainComponentName()) { @Override protected ReactRootView createRootView() { return new RNGestureHandlerEnabledRootView(MainActivity.this); } }; } }
Der Einstiegsdatei index.js oder App.js die folgende Zeile hinzufügen:
/** * @format */ import { AppRegistry } from 'react-native'; import 'react-native-gesture-handler'; import App from './src/App'; import { name as appName } from './app.json'; AppRegistry.registerComponent(appName, () => App);
Webseiten:
react-navigation: https://reactnavigation.org/
react-native-gesture-handler: https://github.com/software-mansion/react-native-gesture-handler
react-native-reanimated: https://github.com/software-mansion/react-native-reanimated
react-native-screens: https://github.com/kmagiera/react-native-screens
react-native-safe-area-context: https://github.com/th3rdwave/react-native-safe-area-context
Redux
redux ist ein globaler App-State-Container.
react-redux ist die offizielle React-Bindung an Redux. Sie erlaut den React-Komponenten das Interagieren mit dem Redux-Store.
redux-persist speichert dauerhaft ein Redux-Objekt. Wird die App neu gestartet, wird das Objekt mit den States wieder in Redux geladen, so dass die App den ursprünglichen Zustand erhält.
$ npm install redux react-redux redux-persist
Zusätzlich die React-Redux-Typen-Entwicklungsabhängigkeiten (devDependencies) installieren:
$ npm install --save-dev @types/react-redux
Webseiten:
redux: https://redux.js.org/
react-redux: https://react-redux.js.org/
redux-persist: https://github.com/rt2zz/redux-persist
Redux DevTools
Redux DevTools sind Add-Ons für die Browser Mozilla Firefox und Google Chrome mit grafischen Redux-Entwicklungswerkzeugen.
Redux DevTools für Mozilla Firefox
Siehe: https://addons.mozilla.org/en-US/firefox/addon/reduxdevtools/
Redux DevTools für Google Chrome
Siehe: https://chrome.google.com/webstore/detail/redux-devtools/lmhkpmbekcpmknklioeibfkpmmfibljd
Im React Native Projekt installieren
Siehe: https://github.com/zalmoxisus/redux-devtools-extension
Socket.IO
Echtzeit-Kommunikation zwischen Webclients und Servern.
Die Bibliothek besteht aus zwei Paketen. Dem Server socket.io und dem Client socket.io-client.
Server installieren:
$ npm install socket.io
Client installieren:
$ npm install socket.io-client
Webseiten:
socket.io: https://socket.io/
socket.io auf Git: https://github.com/socketio/socket.io
socket.io-client auf Git: https://github.com/socketio/socket.io-client
War diese Seite für dich informativ? Hat sie dir gefallen und geholfen?
Dann unterstütze die Weiterentwicklung mit einer kleinen Spende!
Die Spenden werden für die Lizenzen sowie neue Hard- und Software verwendet, die für weitere Projekte auf dieser Webseite eingesetzt werden.