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

##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 = "[e-mail]";
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コードから利用ができる。