React Native und Solana

React Native ist ein Open-Source-UI-Software-Framework, das zur Entwicklung von Mobil-, Web- und Desktop-Anwendungen verwendet wird, indem es Entwicklern ermöglicht, das React-Framework zusammen mit nativen Plattformfunktionen zu verwenden. Mit dem Solana SDK ausgestattet, ist dies eine großartige Plattform, um schnell leistungsstarke native Crypto-Apps zu erstellen.

Der schnellste Weg, um mit React Native und Solana zu beginnen, ist die Verwendung des Solana DApp Scaffold for React Native.

How to use @solana/web3.js in a React Native app

In diesem Tutorial erfahren Sie, wie Sie eine neue React Native-App erstellen und das SDK „@solana/web3.js“ und seine Abhängigkeiten installieren und konfigurieren.

Wenn Sie bereits über eine vorhandene App verfügen, fahren Sie mit Installation der Abhängigkeiten fort.

Erstellen Sie eine neue Anwendung

Wir starten eine neue React Native-Anwendung, die TypeScript verwendet, dann cd in das Projektverzeichnis, wo wir den Rest der Befehle ausführen werden.

npx react-native@0.70.0 init SolanaReactNative --template react-native-template-typescript
cd SolanaReactNative

Abhängigkeiten installieren

Als nächstes installieren wir die Abhängigkeiten. Das Solana JavaScript SDK, ein Paket zum Patchen des React Native Build-Systems (Metro), ein sicherer Zufallszahlengenerator und ein Fix zum Patchen der fehlenden „URL“-Klasse von React Native.

yarn add \
  @solana/web3.js \
  react-native-get-random-values \
  react-native-url-polyfill

Patchen Sie Babel, um die Hermes-Transformationen zu verwenden

Ab August 2022 aktiviert die Vorlage, aus der neue React Native-Apps erstellt werden, standardmäßig die Hermes-JavaScript-Engine, aber nicht die Hermes-Codetransformationen. Aktivieren Sie sie, indem Sie die folgende Änderung an babel.config.js vornehmen:

  module.exports = {
-   presets: ['module:metro-react-native-babel-preset'],
+   presets: [
+     [
+       'module:metro-react-native-babel-preset',
+       {unstable_transformProfile: 'hermes-stable'},
+     ],
+   ],
};

Aktualisieren Sie „index.js“

Um die Polyfills zu laden, öffnen wir die Datei „index.js“ im Stammverzeichnis des Projekts und fügen am Anfang der Datei die folgenden zwei Zeilen hinzu:

import 'react-native-get-random-values';
import 'react-native-url-polyfill/auto';

Aktualisieren Sie „App.tsx“

Fügen wir unserer App ein web3.js-Beispiel hinzu!

Öffnen Sie die Datei „App.tsx“ und fügen Sie den folgenden Code in die „App“-Funktion ein:

In diesem Beispiel richten wir eine Verbindung zu Solana Devnet ein und wenn die Komponenten geladen werden, erhalten wir die Version des Clusters, mit dem wir verbunden sind, und speichern die Version im Komponentenstatus.

Außerdem zeigt dieses Beispiel, wie ein Schlüsselpaar generiert und gespeichert wird.

const [keypair, setKeypair] = useState<Keypair>(() => Keypair.generate());
const randomKeypair = () => {
  setKeypair(() => Keypair.generate());
};

const [version, setVersion] = useState<any>('');
useEffect(() => {
  const conn = new Connection(clusterApiUrl('devnet'));
  conn.getVersion().then(r => {
    setVersion(r);
  });
}, []);

Zuletzt fügen Sie in der Vorlage (oder "Render-Funktion") das folgende Markup hinzu:

{version ? (
  <Section title="Version">{JSON.stringify(version, null, 2)}</Section>
) : null}
{keypair ? (
  <Section title="Keypair">{JSON.stringify(keypair?.publicKey?.toBase58(), null, 2)}</Section>
) : null}
<Button title="New Keypair" onPress={randomKeypair} />

[iOS only] Install cocoapods

Damit unsere Polyfills unter iOS automatisch verknüpft werden können, müssen wir die „Cocoapods“ installieren.

cd ios && pod install

Anwendung starten

Sobald wir alle oben genannten Schritte abgeschlossen haben, können wir unsere Anwendung im Android- oder iOS-Simulator starten.

yarn android
yarn ios

Wenn alles gut gelaufen ist, sollte in Ihrem Simulator eine React Native-App gestartet werden, die die Version von Solana Devnet abruft.

Solana DApp Scaffold für React Native

Wenn Sie sofort durchstarten möchten, können Sie das Solana DApp Scaffold for React Native herunterladen.

Häufige Probleme bei der Verwendung von Kryptobibliotheken in einer React Native-App

Fehler: „Watchman-Crawling fehlgeschlagen“.

Der Teil des Build-Systems, der Ihr Dateisystem auf Änderungen überwacht, heißt Watchman. Bestimmte Versionen von Mac OS verweigern Watchman die Erlaubnis, bestimmte Verzeichnisse wie „~/Documents/“ und „~/Desktop/“ zu beobachten.

Sie wissen, dass Sie dieses Problem haben, wenn der Metro-Bundler einen Fehler ausgibt, der die Worte „Watchman-Crawling fehlgeschlagen.”

Um dies zu lösen, verschieben Sie Ihr React Native-Projekt in das Stammverzeichnis Ihres Benutzerverzeichnisses.

Fehler: URL.protocol ist nicht implementiert

ERROR Error: URL.protocol is not implemented
ERROR Invariant Violation: Module AppRegistry is not a registered callable module (calling runApplication). A frequent cause of the error is that the application entry file path is incorrect. This can also happen when the JS bundle is corrupt or there is an early initialization error when loading React Native.

Dies ist ein Problem, das durch die Verwendung eines Polyfill für das „URL“-Objekt in React Native behoben werden kann.

Installieren Sie das Paket react-native-url-polyfill und importieren Sie es in die Hauptdatei Ihrer App (zB: index.js), wie oben gezeigt.

Fehler: crypto.getRandomValues() wird nicht unterstützt

Error: crypto.getRandomValues() not supported. See https://github.com/uuidjs/uuid#getrandomvalues-not-supported

Dies ist ein Problem, das durch die Verwendung eines Polyfill für das „Krypto“-Objekt in React Native behoben werden kann.

Installieren Sie das Paket react-native-get-random-values und importieren Sie es in die Hauptdatei Ihrer App (zB: index.js), wie oben gezeigt.