React Native の expo-crypto の使い方

2024年7月31日 09:49

「React Native」の「expo-crypto」の使い方をまとめました。

・Expo SDK 51

前回

1. expo-crypto

「expo-crypto」は、「React Native」アプリでデータからハッシュ値を生成するライブラリです (Node.js core API と同等)。「Expo」は「React Native」アプリの開発を簡単にするツールキットになります。

2. expo-speechの使い方

「expo-speech」の使い方は、次のとおりです。

2-1. React Nativeプロジェクトの作成

(1) React Nativeプロジェクトの作成。

npx react-native init my_app
cd my_app

(2) パッケージのインストール。

npx install-expo-modules
npm install expo-crypto

2-2. iOSのセットアップ

(1) podのインストール。

cd ios
pod install
cd ..

(2) Xcodeで署名し、iPhoneにインストールできることを確認。
xcworkspaceを開いた時に以下のエラーがでた場合、「Build Settings → Swift Compiler - Language」でバージョン「Swift 4.2」を指定することで解決しました。

2-3. 音声認識の実装

(1) コードの編集。

・App.tsx

import React from 'react';
import { View, Button } from 'react-native';
import * as Crypto from 'expo-crypto';

// アプリ
export default function App() {

  // ハッシュ値の生成
  const generateHash = async () => {
      // ハッシュ値の生成
      const digest = await Crypto.digestStringAsync(
        Crypto.CryptoDigestAlgorithm.SHA256,
        'GitHub stars are neat 🌟'
      );

      // ハッシュ値を出力
      console.log('Digest: ', digest); 
  };  

  // UI
  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <Button title="ハッシュ値の生成" onPress={generateHash} />
    </View>
  );
}

Crypto.digestStringAsync(algorithm, data, options) の引数は、次のとおりです。

・algorithm : アルゴリズム
　・CryptoDigestAlgorithm.MD2
　・CryptoDigestAlgorithm.MD4
　・CryptoDigestAlgorithm.MD5
　・CryptoDigestAlgorithm.SHA1
　・CryptoDigestAlgorithm.SHA256
　・CryptoDigestAlgorithm.SHA384
　・CryptoDigestAlgorithm.SHA512
・data : データ
・options : オプション
　・CryptoEncoding.BASE64
　・CryptoEncoding.HEX (デフォルト)

(2) コードの実行。

npm start

次回

この記事が気に入ったらサポートをしてみませんか？