React Native: Nützliche Pakete

---

• • Home
  • IT
  • Programmierung
  • JavaScript
  • React Native
  • Nützliche Pakete

---

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
• axios
• buffer
• i18next
• NativeBase
• React Navigation
• Redux
• Redux DevTools
• Socket.IO

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

 

---

---

---

---