React Nativeでnpmライブラリを使う
npmライブラリを利用する
- React Nativeではライブラリの管理にnpmを利用する。
- package.jsonでライブラリの管理を行なっている。
- npm経由で追加したパッケージはpackage.jsonに変更が記載される。
npmライブラリの使用
No.1 バリデーションを行うライブラリ
1. validatarをインストールする
npm install --save-dev validator
2. 処理を追加する
サンプルなのでreact-native initで作成した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をインストール
npm install jshashes
2. 処理を追加する
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をインストール
npm install react-native-device-info
2. 処理を追加する
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コードから利用ができる。