こんなとき react-nativeのアプリを使って自作APIサーバーへhttpリクエストを行う際。POSTMANではレスポンスが返ってくるもシュミレータからだとネットワークエラーとなり通信できなかったときの解決策。 （android側のお話です。） 昔chromeからも大変苦労したのを思い出しました。cors制約。しかし今回はアクセス先を以下に変更することで解消 localhost→10.0.2 […]
以下3点で少しハマったのでメモしておきます。 ①react-native run-iosではシュミレータが起動するがxcode上でのrunでこける ②シュミレータでの起動はうまくいくが実機でこける ③特定のパッケージを用いた場合に再びnode:command not found それぞれについて以下の作業で解消することができました。 ①react-native run-iosではシュミレータが起動 […]
まず、react-nativeにはreact-native-cliとexpo-cliの２通りがありますが、今回は前者のreact-native-cliでのアプリです。まずはAndroid用です。 着地点 自身のアプリケーションにFirebase Authenticationを組み込み、ユーザー情報の認証機能を作るまで。 Firebaseで認証機能の考え方とそのメリット 通常、アプリケーションでAP […]
はじめに この記事はまだ解決していませんが、自身の整理を兼ねてまとめています。解決できれば更新します。解決済み react-nativeを使ったネイティブアプリ開発にて、端末の情報を取得したいということになりました。 端末情報を取得するためにはreact-native-device-infoというのを使うとできるらしいですが、なにやらうまく行かず・・・。 react-nativeのバージョン、an […]
はじめに このあたりの知見が全くない方向け。Firebaseすごいってよく聞くけど触ってなかった方や、react-nativeでのpush通知の仕組みがよくわかってない方など。 push通知とは アプリ内通知であれば普通にイメージが湧きますが、端末への通知ってどうすれば？となったときに、いろいろよしなにしてくれるのがFirebase。 使うモジュールについて Firebaseのアプリ内通知のことは […]
やりたいこと react-nativeを用いたネイティブアプリで、バーコードを生成し、外部の端末で読み込みがしたい。 読み込み時に端末の明るさを明るくし、読み込みやすい状態にしたい。 使用するパッケージ バーコード生成にはreact-native-barcode-builder 端末の明るさを変更するにはreact-native-device-brightnessを使う上記パッケージだと今後サポー […]
再現した状況 フロント、サーバー共にローカルでの開発環境。フロントはreact-native。サーバーサイトはexpressで立てたAPIサーバー。 Webでreactを使うときのようにaxiosでAPIを叩いたが、network errorでデータの取得が不可。 原因 APIのドメインを「http://localhost」から「http://10.0.2.2:3001」にすると取得ができた。 具 […]
はじめに react-native製のアプリで、なんてことはない外部サービスへのシェア機能を実装しようという話。調べた感じ方法は大きく２通りあるようです。 react-nativeでSNSシェア機能を実装する方法 標準APIを用いる react-native-sns-shareを使う 前者の標準APIを用いてサクッとやることにしました。後者のreact-native-sns-shareはnodeの […]
react-nativeでアプリ内データをCSV出力 私が勉強がてら作っているアプリはRealmを使っているため、データのエクスポート機能が欲しいところ。そこで今回はアプリ内データをCSVファイルでデバイスのストレージに出力する機能を追加してみました。Androidでの実機確認済み。 react-nativeでアプリ内データをCSV出力するために必要なこと 必要なことは大きく３つ rn-fetch […]
Androidアプリのリリースを行うのは初めてでしたので、備忘録をかねて残しておきます。扱い慣れたWebとは違い全く未知の領域なので不安がありましたが、幸いネット上の情報が多く問題なく進めていくことができました。 1.GooglePlayの開発者登録を行う 1-1.Googleアカウント作成 https://accounts.google.com/signup Googleアカウントはいろいろなサ […]
はじめに react nativeのソースを貪っているとrealmというパッケージを使っていて、初めて聞いたワードだったのでなんのことやらだったので、調べてみました。 Realmってなにするもの？ Realm（レルム）はiOSやAndroidアプリで使えるDBで、モバイル用データベースという立ち位置のようです。 Realmの特徴 SQL文が不要 組み込みデータベース（デバイス上で動作） メモリ効率 […]
react-nativeを使ったアプリ（react-native-cli）で、react-native-router-flux、native-baseを使ったアプリケーションの土台作りと、ライブラリ特有のルール等のメモ。 パッケージインストール react-native-router-fluxのインストール 私の環境では上記だけではreact-native-router-fluxでの画面遷移が上手 […]
はじめに react-nativeでの環境構築ですが、いろいろと準備することが多くてハマった際の問題切り分けが少し大変だった印象です。 まず、react-nativeでのアプリ作成にはExpoとreact-native-cliの２つがあるので、ググるときに気を付ける。前者の環境構築はかなり簡単です。 今回はWindowsでreact-native-cliを使ったアプリの環境構築手順と、Androi […]
はじめに Progressive Web Appsがすごいということなのでやってみました。 かつてはネイティブアプリを作る＝iPhone app ならxcodeとswiftで作る。AndroidならAndroid StudioとJAVAでそれぞれ別に作るという感じでした。 それがreactのexpo cliを使えばどちらのOSにも対応したアプリが簡単に作ることができるようになりました。少し凝ったも […]
はじめに 公式のdocを参考に、react native cliでのnativeアプリ開発環境構築をやっていきます。 react nativeの環境構築にはお手軽なexpo cliとreact native cliがある。今回は後者「react native cli」で、macを使って環境構築をしていきます。 mac初心者なので必要だった工程１から10まで全て書いていきます。 １．導入準備 rea […]
ダウンロード ダウンロードは以下からhttps://developer.android.com/studio/index.html?hl=ja インストール googleにデータを送信するかどうか（任意で選択） セットアップ エミュレーターの設定 デバイスを選択します。 作成したエミュレーターを立ち上げる expoアプリからandroidエミュレーターを起動する エミュレーターが立ち上がった状態で […]