Solana Cookbook

React NativeとSolana

React Nativeは、開発者がネイティブプラットフォーム機能と共にReactフレームワークを使用できるようにすることで、モバイル、Web、およびデスクトップアプリケーションの開発に使用されるオープンソースのUIソフトウェア フレームワークです。Solana SDKを搭載したこれは、パフォーマンスの高いネイティブCryptoアプリをすばやく構築するための優れたプラットフォームです。

React NativeとSolanaを開始する最も速い方法は、Solana DApp Scaffold for React Nativeを使用することです。

React Nativeアプリで@solana/web3.jsを使用する方法

このチュートリアルでは、新しいReact Nativeアプリを作成し、@solana/web3.jsSDKとその依存関係をインストールして構成する方法を学習します。

既存のアプリが既にある場合は、依存関係のインストールに進みます。

新しいアプリを作成する

TypeScriptを使用する新しいReact Nativeアプリケーションを開始し、プロジェクト ディレクトリにcdして、残りのコマンドを実行します。

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

依存関係をインストールする

次に、依存関係をインストールします。Solana JavaScript SDK、React Nativeのビルドシステム（Metro）にパッチを当てるパッケージ、安全な乱数生成器、React NativeのURLクラスの欠落にパッチを当てる修正プログラムです。

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

Hermes変換を使用するようにBabelにパッチを適用する

2022 年 8 月の時点で、新しい React Native アプリが作成されるテンプレートは、デフォルトで Hermes JavaScript エンジンを有効にしますが、Hermes コード変換は有効にしません。babel.config.jsに次の変更を加えて有効にします:

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

Update index.js

ポリフィルをロードするには、プロジェクトのルートにあるindex.jsファイルを開き、ファイルの先頭に次の2行を追加します:

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

Update App.tsx

アプリに web3.js の例を追加しましょう！

ファイルApp.tsxを開き、App関数内に次のコードを追加します:

この例では、Solana Devnetへの接続をセットアップし、コンポーネントがロードされると、接続先のクラスターのバージョンを取得し、そのバージョンをコンポーネントのStateに保存します。

さらにこの例は、キーペアを生成して保存する方法を示しています。

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);
  });
}, []);

最後に、テンプレート(またはレンダリング関数)に次のマークアップを追加します:

{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 のみ]cocoapodsをインストールする

ポリフィルをiOSで自動リンクするには、cocoapodsをインストールする必要があります。

cd ios && pod install

アプリケーションを開始

上記のすべてが完了したら、AndroidまたはiOSシミュレーターでアプリケーションを開始できます。

yarn android
yarn ios

上記のすべてが完了したら、AndroidまたはiOSシミュレーターでアプリケーションを開始できます。

React Native用Solana DAppスキャフォールド

すぐに実行したい場合は、Solana DApp Scaffold for React Nativeopen in new windowをダウンロードできます。

React Nativeアプリで暗号化ライブラリを使用する際の一般的な問題

Error: Watchman crawl failed

ファイルシステムの変更を監視するビルドシステムの部分は、Watchmanと呼ばれます。特定のバージョンのMac OSは、~/Documents/や~/Desktop/などの特定のディレクトリを監視するWatchmanの許可を与えることを拒否open in new windowしています。 Metro バンドラーが“Watchman crawl failed”という単語を含むエラーopen in new windowを生成した場合、この問題があることがわかります。

これを解決するには、React Nativeプロジェクトをユーザーディレクトリのルートに移動します。

Error: URL.protocol is not implemented

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.

これは、React NativeのURLオブジェクトにポリフィルを使用することで解決できる問題です。

上記のように、パッケージreact-native-url-polyfillをインストールし、アプリのメインファイル(例: index.js)にインポートします。

Error: crypto.getRandomValues() not supported

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

これは、React Nativeのcryptoオブジェクトにポリフィルを使用することで修正できる問題です。 上記のように、パッケージreact-native-get-random-valuesをインストールし、アプリのメインファイル(例: index.js)にインポートします。

Last Updated:
Contributors: PokoPoko2ry