React Nativeでnpmライブラリを使う

npmライブラリを利用する

React Nativeではライブラリの管理にnpmを利用する。
package.jsonでライブラリの管理を行なっている。
npm経由で追加したパッケージはpackage.jsonに変更が記載される。

npmライブラリの使用

No.1 バリデーションを行うライブラリ

1. validatarをインストールする

validatarをインストール

npm install --save-dev validator

2. 処理を追加する

サンプルなのでreact-native initで作成したApp.jsにコードを記載

App.js

import validator from 'validator';

// 文末に追記
const mail = "test@test.com";
console.log(validator.isEmail(mail));

3. 実行+確認

アプリをリロードして実行結果を確認する。
メールアドレスとして不正がないので「true」がコンソールに表示されています。
不正なアドレスを指定して実行すると「false」が表示されます。

このようにReact Nativeではnpmを利用して外部ライブラリを簡単にインストールし実行することができます。

No.2 ハッシュ値計算ライブラリ

MD5のハッシュ値計算ライブラリの「jshashes」を利用します。

1. jshashesをインストール

jshashesをインストール

npm install jshashes

2. 処理を追加する

App.js

import jshashes from 'jshashes';

// 文末に記載
const MD5 = new jshashes.MD5();
console.log(MD5.hex('Hello'));

3. 実行+確認

アプリをリロードして実行結果を確認する。
JavaScriptのコンソールにハッシュ値が表示される(8b1a9953c4611296a827abf8c47804d7)
＊ハッシュ計算のnpmライブラリとして「Crypto」というライブラリが用意されていますが、React Nativeで使用することはできません。
Node環境とReact NativeのJavaScriptの実行ランタイムが異なるためです。
Node標準ライブラリはNode.jsランタイム、React NativeはJavaScriptCoreランタイムを使用する。

No.3 ネイティブコンパイルが必要なライブラリ

ネイティブを経由しないと取得できない情報をJavaScript経由で取得できるライブラリ「react-native-device-info」を利用します。

1. react-native-device-infoをインストール

react-native-device-infoをインストール

npm install react-native-device-info

2. 処理を追加する

App.js

import DeviceInfo from "react-native-device-info";

// 文末に記載
console.log(DeviceInfo.getDeviceLocale());

3. 実行+確認

アプリをリロードして実行結果を確認する。
＊このままアプリをリロードしてもエラーが発生します。これだけではネイティブコードの組込みが完了していないため。

4. ネイティブコードの組み込み

react-native link react-native-device-info

コマンド実行後にアプリを再起動します。Nodeサーバを停止し、再度「react-native run-ios」を実行する。
react-native linkコマンドを使うことで、カレントディレクトリのandroidとios以下のネイティブアプリ向けのコードに、必要な設定が追加されます。
＊npm経由のインストールでもネイティブコードの追加ができ、手軽にReact NativeのJavaScriptコードから利用ができる。