ニフクラ mobile backend(mBaaS)お役立ちブログ

スマホアプリ開発にニフクラ mobile backend(mBaaS)。アプリ開発に役立つ情報をおとどけ!

React Native用NCMBライブラリを拡張しました(データストア保存)

f:id:mbaasdevrel:20180306160753p:plain

React Native用のNCMBライブラリが有志によって作られています。こちらのライブラリを使えばNCMBの認証をReact Nativeアプリでできるようになります。

とは言え、他の機能がないのは寂しいので、フォークしてデータストアの機能を追加してみました。

セットアップ

元々のセットアップ方法から、より標準のJavaScript SDKに近い形に変更しました。

import NCMB from 'react-native-ncmb';

const applicationKey = 'YOUR_APPLICATION_KEY';
const clientKey = 'YOUR_CLIENT_KEY';

const ncmb = new NCMB(applicationKey, clientKey);

データストアのクラスを定義

データストアの定義はJavaScript SDKと同じです。

const Item = ncmb.DataStore('ReactNative');

データストアの行データ作成

行データの作成はメソッドになっているので注意してください。データストアのクラスを動的に作る方法が見つからず、このような形になっています。

const item = Item.item();

データの設定と保存

各フィールドごとのデータの設定、そして保存はJavaScript SDKに似せています。返ってくるのは DataStoreItem クラスになります。

item
    .set('msg', 'Hello World')
    .set('test', 'Hoge')
    .save()
    .then((data) => {
      console.log(data);
      // -> DataStoreItem
    })

まとめ

コードはNCMBMania/react-native-ncmb: Use Nifty mobile backend 's REST API to correspond to React Nativeにあります。利用する際には次のように記述すれば良いでしょう。

npm i NCMBMania/react-native-ncmb#master -S

まだ機能は少ないですが、徐々に追加していきます。ぜひReact NativeでもmBaaSを活用してください!

中津川 篤司

中津川 篤司

NCMBエヴァンジェリスト。プログラマ、エンジニアとしていくつかの企業で働き、28歳のときに独立。 2004年、まだ情報が少なかったオープンソースソフトの技術ブログ「MOONGIFT」を開設し、毎日情報を発信している。2013年に法人化、ビジネスとエンジニアを結ぶDXエージェンシー「DevRel」活動をスタート。