【ReactNative】react-native-firebase/remote-configを使う
以前にreact-native-firebaseのセットアップ方法と各機能の簡単な説明についてご紹介しました。 今回はその中の機能一つであるremote-configについてインストール方法や使い方を公式ソースに従ってご紹介します。 アプリのバージョンを上げることなく内部的な設定値を更新でき、ABテストなどにも応用が効くため非常に有益な機能です。
2020.10.27
以前にreact-native-firebaseのセットアップ方法と各機能の簡単な説明についてご紹介しました。 今回はその中の機能一つであるremote-configについてインストール方法や使い方を公式ソースに従ってご紹介します。 アプリのバージョンを上げることなく内部的な設定値を更新でき、ABテストなどにも応用が効くため非常に有益な機能です。
2020.10.27
ReactNativeアプリで地図機能を実装するならreact-native-maps一択だと思います。 さらに細かく情報をプロットしていくならMakerコンポーネントは必須ですが、カスタムするにはスタイル周りを学習する必要があります。 今回は、コピペで動くそれっぽいMakerをご紹介します。
2020.10.14
iOS14が公開されてまだまだ日が浅いですが、追加された機能に伴いReactNativeアプリにも変更が必要なものが多々あります。 その中で自分が見つけたのは、Date型コンストラクタの挙動についてです。 Qiitaにも同様の記事を記載しましたが、念のため個人ブログの方にも記載しておきます。
2020.10.14
FirebaseはスマホやWebアプリのバックエンドとして非常に優秀で、認証や通知、分析にストレージ・DBなど幅広い用途で使用することができます。 ReactNativeアプリでもライブラリであるreact-native-firebaseが提供されているため比較的簡単に組み込むことができます。 今回はそのセットアップ手順をご紹介します。
2020.10.13
Appleの審査結果の中で、外部ブラウザを呼び出している場合にSafari Viewの使用を勧められることがあります。 これは、iOSのアプリ上でSafariと同様の挙動が行えるモジュールです。 今回はReactNativeアプリでSafariViewを使う方法をご紹介します。
2020.10.06
AppleサインインはiOS13で追加された、AppleIDでログインを行うことができる機能です。 それだけなら便利な機能が増えたなぁで済む話ですが、GoogleログインのようにSNSログインを行なっているアプリには、このAppleサインインが必須となります。 今回はreact-native-apple-authenticationを使ったAppleサインインの方法をご紹介します。
2020.10.05
ReactNativeでめでたくiOSのアプリが出来上がり、いざストア公開しようとした時に立ちはだかるのが審査です。 今回は、審査中に遭遇した警告メールとその対処法についてご紹介します。 ReactNativeと書いていますが、実際にはSwift等で作ったアプリでも同様の事象があると思います。
2020.10.02
Reactを学習し始めて、基本的なことは大体身についたからいよいよ独自で考えたアプリを作ってみよう・・・ と取り掛かった際に遭遇しやすいのがこのエラーです。 今回は「Target Container is not a DOM element」エラーの対処法についてご紹介します。
2020.09.29
react-native-modalはReactNative製アプリにモーダル機能を追加してくれる便利なライブラリです。 しかしながら、複数のモーダルを画面に展開したい場合は少し工夫が必要になります。 今回は、react-native-modalで複数のモーダルの閉じる処理・開く処理を同時に行う方法について解説します。
2020.09.29
今回はReactで、非同期やタイマー処理を使った場合に発生するWarningの内容と対処法についてご紹介します。 後片付けの処理を忘れると起こりがちなため注意が必要です。
2020.09.17
react-nativeで画像選択をしたい場合、だいたいはImagePickerを使っているかと思います。 ただ、SNSのプロフィール画像設定UIでよくあるような「特定の形に画像を切り抜いて選択する」場合は、react-native-image-crop-pickerを使うのがおすすめです。
2020.09.15
react-native-firebaseはreact-nativeアプリにFirebaseを簡単に組み込むことができるライブラリです。 中でもよく利用するのがプッシュ通知で、基本はガイド通りに進めていけば問題なく動作しますが、Androidの特定バージョン以降ではプッシュ通知のポップアップが表示されません。 今回は上記のケースの対処法をご紹介します。
2020.09.14
react-native-webviewは以前ご紹介したとおり、既存のWeb資産をreact-nativeアプリ上で使いまわせるため非常に便利ですが、いくつか注意点があります。 例えばOAuth認証をしている画面を描画した場合などです。特にGoogleはWebViewからのOAuth認証をブロックしているため、通常では利用することができません。
2020.09.04
以前紹介したreact-native-calendarsの日本語化対応時の記事です。 簡単に多言語対応できるため、非常に便利です。
2020.09.02
ReactNativeでアプリ開発をしていて、いざリリースができるとなった段階で「特定の端末だとフォントや要素が大きすぎる/小さすぎる」という状況に遭遇することがあると思います。 たいていは使い慣れた実機やエミュレータで開発しているため、別なサイズの端末に切り替えた時にサイズ周りのレイアウトが崩れてしまいます。 今回は、端末によってサイズを調整してくれるライブラリを紹介します。
2020.08.27
ReactNativeで画面遷移を扱う方法はいくつかあると思いますが、オーソドックスなのがreact-navigationを用いたものだと思います。 その中でもタブナビゲータを利用しようとするとreact-navigation-tabsを使うことになりますが、タブを押下した際に画面遷移以外の処理を行いたい時があると思います。 今回はそんな場合のTipsです。
2020.08.03
先日、ReactNativeとredux-formを使ったアプリでWarningが出ました。 ちょっと難解な内容だったので対処法をメモとして残します。
2020.07.27
ReactNativeはReactやReduxの知識さえあればだいたいのアプリは作ることができます。 理由は、Reactで使った知識をそのまま流用できる点が多いためです。 しかし、アニメーションは少し勝手が違って、Reactで使ったアニメーションをそのまま流用することは難しいです。 今回は、ReactNativeで動きのあるアプリを実装するための方法を紹介します。 具体的には、Animatedを使って描画時にぴょんぴょん跳ねるViewを作ります。
2020.07.07
以前にMacでReactNativeの環境構築方法を紹介しました。 久しぶりにゼロからプロジェクトを作ってビルドしてみると「No bundle URL present」が・・・ 今回は、その際の対処法を紹介します。
2020.06.25
ReactNativeで作成したアプリに独自のフォントを導入したい場合があるかと思います。 今回は、ReactNative製アプリに対してカスタムフォントを導入する場合の方法をご紹介します。
2020.06.23
ReactNativeを使って既存Webサービスのアプリ版を開発している場合、一部のアプリ独自の機能(例えばプッシュ通知やカメラ)を除いては既存ソースを流用できる場合があります。 例でいうと、ユーザ情報画面は既存のWebのマイページをそのまま表示するとかです。 その場合、WebViewを使うことになると思います。 ReactNativeでいうところのWebViewはreact-native-webviewを使うことになりますが、ここで問題になってくるのがReactNative側のコードとWebView側のコードの連携処理です。 先のマイページの例でいうと、WebView側のマイページ画面のソースコードにReactNative側からユーザ情報を渡してあげなければ成立しません。 今回はreact-native-webviewを導入した上で、WebViewとの値の受け渡し方法について調べました。
2020.06.22
ReactNativeのアプリは最終的にはAndroidかiOS(もしくはその両方)でのリリースを目指しています。 しかし、リリースビルドというものは短いスパンでそう何回も繰り返すものではないため、久々にやってみると思いもよらないトラブルに遭遇しがちです。 今回は、Androidのリリースビルド時にkeystoreファイルが消えてしまったトラブルを紹介します。
2020.06.16
ReactもしくはReactNativeをTypescriptで書いていると、コンポーネントに渡すPropsを定義することは日常茶飯事です。 そんな時、知っているとちょっと便利なTipsをご紹介します。
2020.06.11
日付選択のUIは色々あると思いますが、個人的にはカレンダーが一番直感的かなと思います。 そこで今回はReactNativeアプリを対象に、カレンダーを表示させるライブラリであるreact-native-calendarsと、モーダルを表示させるライブラリのreact-native-modalを使って、カレンダーモーダルを作りたいと思います。
2020.06.06
アプリを作っていると、画像を扱う機会も自然と増えます。 よくあるUIで「FacebookやInstagramのようにカメラロール等のアルバムをグリッド表示して、画像を複数選択する」というものがあります。 今回はreact-native-communityが提供しているreact-native-camerarollを使って同じようなUIを作る方法をご紹介します。
2020.06.02
ReactNatveで作成したアプリをストアリリースすることになった場合、BundleIDやPackageNameを変える必要があります(それぞれiOS,Androidのアプリの一意な識別子とアプリ名です)。 しかし、せっかくReactNativeを使ってネイティブのモジュールを変更せずに済んでいるので、BundleIDとPackageNameを変更する場合も同じようにしたいですよね。 そこで今回は、react-native-ci-toolsを使ってコマンド一発でBundleIDとPackageNameを変更できるようにします。
2020.06.01
ReactNativeでアプリを作る場合、だいたいはFirebaseなんかのmBasSを使ってデータのやり取りをするかと思います。 しかし「そこまで大掛かりなデータを使うわけでもないんだよなぁ」なんてケースもちらほら見受けられます。 そんな時にオススメなのがreact-native-storageです。 ちょっとしたデータなら簡単に端末に持たせられ、インストールも簡単なので是非使ってみましょう！
2020.05.26
以前にMacOSで「Typescript+ReactNative」の環境構築手順を紹介しましたが、今回はWindows版となります。 基本的にやることは同じなのですが、一部必要なものやコマンドが違うため注意です。
2020.05.26
ReactJSの技術を使ってスマホアプリが開発できるフレームワーク「ReactNative」 今回は、そんなReactNativeの環境構築からプロジェクト実行までを順に解説していきます。 私個人はTypescript信者なので、私が開発で実際に使用している「Typescript+ReactNative」の環境構築記事になります。
2020.05.25