スマートフォンアプリはSwiftやJavaのように特定のプラットフォームで利用できるもの、そしてUnityやMonacaのように複数のプラットフォームで動作するものがあります。React Nativeは後者に属する技術です。
以前React Native用SDKを開発していたのですが、バージョンアップなどに伴って利用できなくなっていました。そこでTypeScriptに沿う形で改めてReact Native SDKを開発しはじめました。なお、これは非公式のSDKになりますので、サポート外になります。
今回はファイルアップロード機能を紹介します。
使い方
ファイルアップロードはテキストファイル、バイナリファイルの二種類が想定されています。まずテキストファイルの場合です。二つ目の引数にファイルの内容をそのまま適用してください。
const file = new ncmb.File(); const res = await file.upload('test.txt', 'Hello, world!');
次にバイナリです。例えばカメラの写真をアップロードする場合です。この場合、画像のURIを指定します。以下はiOSの場合です。
const { status } = await Permissions.askAsync(Permissions.CAMERA_ROLL); if (status === 'granted') { const result = await ImagePicker.launchImageLibraryAsync({ mediaTypes: ImagePicker.MediaTypeOptions.All, allowsEditing: false }); const fileName = result.uri.match(/^.*\/([a-zA-Z0-9\-]*\.jpg)$/)[1]; const file = new ncmb.File(); const res = await file.upload(fileName, {uri: result.uri.replace('file://', ''), type: result.type}); }
Androidは次のようになります。
const result = await ImagePicker.launchImageLibraryAsync({ mediaTypes: ImagePicker.MediaTypeOptions.All, allowsEditing: false }); const fileName = result.uri.match(/^.*\/([a-zA-Z0-9\-]*\.jpg)$/)[1]; const file = new ncmb.File(); const res = await file.upload(fileName, {uri: result.uri, type: result.type});
ACLの扱い
ACLは3つ目の引数で指定してください。
const acl = new ncmb.Acl(); acl .setPublicReadAccess(true) .setPublicWriteAccess(false); const file = new ncmb.File(); const res = await file.upload(fileName, {uri: result.uri, type: result.type}, acl);
セットアップ
インストールは npm で行います。
npm i ncmb-react-native -S
まずライブラリを読み込みます。
import NCMB from 'ncmb-react-native';
そして初期化します。
import config from './config.json'; const ncmb = new NCMB(config.applicationKey, config.clientKey);
コード
SDKはNCMBMania/ncmb-react-native: NCMB SDK for React Nativeにて公開しています。ライセンスはMIT Licenseです。
まとめ
カメラの写真をアップロードする、作成したテキストデータを保存するなど、ファイルアップロードを利用する機会は多いかと思います。ぜひReact Nativeアプリで活用してください。