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

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

Anzeige

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

 


Anzeige

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.




Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert