[memo] ReactNativeでスマホアプリ開発!導入から公開までのわすれやすい彼是!

この記事はまだメモ段階です。ざっくりしてます😁

環境構築

react-community/create-react-native-app: Create a React Native app on any OS with no build config.

上にプロジェクト作成まで書いてある。

前提:nodeは安定版を入れる

No Xcode or Android Studio installation is required.

react-community/create-react-native-app: Create a React Native app on any OS with no build config.

上のように有りますが、いれた方がいいかもしれません。詳しくは後述。

ざっと書き出すと、

❶create-react-native-app導入

ReactNativeプロジェクト作成用ライブラリをグローバルに導入(私はyarn派)

$ npm install -g create-react-native-app
# or
$ yarn global add create-react-native-app.

❷プロジェクト作成

(my-appの名前はアプリ名にする方が後々わかりやすい)


$ create-react-native-app my-app
$ cd my-app

❸npmモジュールインストール

$ npm start
# or
$ yarn start

❹もし、❸でエラーが出たら

下のようにエラーが出たら、おとなしく水色になっているコードを実行しましょう。

その際、パスワードを聞かれるかもしれません。特に何も設定していなければ、パソコンのログインパスワードと同じです。

実行後に❸を行えば下の画像のようにQRコードが出て、正常に動き出すでしょう!

❺expoを導入

❹の状態でも開発はできますが、expoをいれたほうが、

簡単にエミューターが使えるので開発が楽です。

ただし、expでできないことがあるので便利ですが、妥協が必要になるツールです。

詳しくは下をどうぞ!(一番の妥協はサイズですね。30MB超えるのを許容できるかですね)

Why not Expo? – Expo Documentation

まだ詳しくはわかりませんが、google Playでは30MBと表示されますが、

インストールしたら90MBくらいになります。

テストしたい方は私のテストアプリを参考にどうぞ、

テストメモアプリ

多分下リンク先 の会話がそんな仕様について言ってるような気がします。

iOS standalone app size is too big – create-react-native-app (CRNA) – Expo Forums

導入方法については、

下のリンクにexpoに必要なツールのインストールについて書かれています。

本体とエミュレータなど。

Installation – Expo Documentation

ソース管理

環境構築のセクションに書かれていることを一通り終わった後にイニシャルコミット!

Gitコードはリポジトリを新しく作れば、表示されるのでそれに従えばOK!

コードはプロジェクトのカレントディレクトリでね^^

エディッター

vsCodeをすでに使っていたらvsCode以外使えなくなります。🚢

atom使ってみたけど。。。

linter & Prettier

参考リンク

今からReact始める人はESLint使おう – Qiita

[React Native]VSCodeでPrettierを入れる – Qiita

How to configure React Native (Expo) project to use AirBnB’s React rules via ESLint? · Issue #1589 · airbnb/javascript

Prettier 入門 ~ESLintとの違いを理解して併用する~ – Qiita

ReactNative ライブラリ

react-native-textinput-effects

halilb/react-native-textinput-effects: Text inputs with custom label and icon animations for iOS and android. Built with react native and inspired by Codrops.
便利そうだけど、

reactのバグ?で日本語の入力がおかしくなっているので、

react-native-textinput-effectsは使えなくなっている。

(つかいたかったなぁ)

Firebase

匿名認証

JavaScript を使用して Firebase 匿名認証を行う  |  Firebase

上の方法で下を参考に、、、

認証状態の永続性  |  Firebase

オフラインでも使える?

オフライン データを有効にする  |  Firebase

使えませんでした。。。

使うとしたら、

React Native Firebase – Simple Firebase integration for React Native – 

を使って、

Expoを使わないって感じで、

まずは簡単に作りたかったからExpo外すのは考えらんなくて断念

AsyncStorageで代用!ちょっとした所ならこれで事足りる。

firestoreがエラー出るんだけど・・・

FireStore timestampsInSnapshots · Issue #1575 · angular/angularfire2

const db = firebase.firestore();
db.settings({ timestampsInSnapshots: true });

で解決

firebase.firestoreを使うときは最初に時間型の設定が必要

DB

オフラインでも使いたいとき

データを頻繁にやりとりしないけど、

オフラインで使えないと困るような、簡単なDBが欲しいときは

AsyncStorage で十分!

サンプル ⇦ コピペで使える誰かのサンプル🤗

公式が下のようにRocksDBかSQLiteが利用可能と書いてあったので、

どっちか入れないといけないと思って入れようとしたけど、

On iOS, AsyncStorage is backed by native code that stores small values in a serialized dictionary and larger values in separate files. On Android, AsyncStorage will use either RocksDB or SQLite based on what is available.

AsyncStorage · React Native

RocksDBはjs対応してないし、SQLiteはsql使わないといけないし、で

AsyncStorageを使うのを諦めて、

realmを使おうとしたけど、expo対応してないしで、

もうやけくそになって、適当にコピペしたらできた。。。(;ω;)

サンプルコードを作ったpradeep singhさんgit眺めてたら響く言葉があったから書

技術は個人を解放するために使用する必要があります!

pradeep1991singh (pradeep singh)

React の書き方

thisの参照先が変わる!

onPress={this.onPressButton}

上記のコードでボタンなどがタッチされた時にonPressButtonメソッドを実行することができます。

しかしこれでは、thisの参照先がクラスではなく、メソッド自体になります。

クラスを参照したい場合は下記の通りに、

onPress={() => this.onPressButton()}

理由は・・・

state

他のコンポーネントからstateを変えたい時

ColinRyan commented

navigationにsetstateメソッドをパラメタで渡す、

そのパラメタを遷移先で実行する。

<br/>って使えないの?

使えません。

{'\n'}

が同じ役割を果たしてくれます!

参考:javascript – How can I insert a line break into a text component in React Native? – Stack Overflow

headerTitleを画面ごとにかえる

Configuring the header bar · React Navigation

エラー (>_<)

expoアプリ再起動してみる!

新しいライブラリを入れると必ずおかしくなる。

入れた直後は大丈夫で、5分くらいして原因不明のエラーになることがあるので注意。

ライブラリを入れたときは再起動が安全、

React Native 便利API

オフラインとオンラインを判断する!NetInfo

NetInfo · React Native

√ FirebaseとAsyncStorageの使い分けとかに使える

アプリを開いた時にstateを変えたい!AppState

AppState · React Native

√ このAPIを使えばアプリを開いた時にsetStateを行い、再レンダリングすることができます。

EXPO

画面の向き固定

react-nativeのreact-native-orientationというライブラリがありますが、expoならもっと簡単に制御できます。

例えば、縦方向固定にしたい場合は“orientation”: “portrait”をapp.jsonのEXPOのところに追加するだけです。

詳しくはこちら、とこちら

画面別に固定にするかどうかも設定できます。

Expo.ScreenOrientation.allow(orientation) とかで

chromeでコンソールログを見る

Debugging · React Native

詳しくは上のリンクから。

iosシミュレータで⌘D、

で、開いたメニューからそれっぽいのを選ぶ!

app storeの言語表記が英語に!?

上のように、言語が英語になってしまいました。

特に設定しないと英語になるようです!

そこで!

"expo":{
  ...
  "ios":{
    "infoPlist":{
      "CFBundleDevelopmentRegion":"ja_JP"
    }
  }
}

上のような設定を加えるよいいようです!

詳しくは参考先をご覧ください。

参考:expoでLocalization native development regionをJapanにしてDatePickerIOSを日本語にするために、app.jsonにinfoPlistを設定する的なお話 ~ 適当な感じでプログラミングとか!

exp publish で変更をすぐ反映

exp publish 

を行うと、変更がユーザーの端末にインストールされているアプリに反映されます。

申請の必要はありません。(アプリの再起動は必要っぽい)

もちろん、申請しないと反映しないような変更もあるのでお気をつけて!

この辺りの変更は反映しません。

  • Expo SDKのバージョン
  • ios、androidのキー
  • スプラッシュ
  • アイコン
  • アプリ名
  • スキーム
  • バンドルアセット
  • assetBundlePatterns

詳しくはこちら

Publishing – Expo Documentation

Configuring OTA Updates – Expo Documentation

iOSエミュレーターでキーボードが出ない時

mac

Thanks the others for asking but “Uses the Same Layout as macOS” didn’t change anything in my case.

The solution was to check “Connect Hardware Keyboard” and then “Toggle Software Keyboard(command+K)”.

Legonaftik

ios – How to use Mac keyboard while Simulator keyboard is on the screen – Stack Overflow

または、HardWare の Keyboard を選択し、下の画像通りに、

Pavan V Parekh

ios – How to use Mac keyboard while Simulator keyboard is on the screen – Stack Overflow

ESlint

ESlintにイラついた時。

ESLint対応物語 ~no-restricted-syntax~ – Qiita

上のリンク先を読めば救われるかも・・・

便利な書き方を知るきっかけだと思うようにしてます。

Array – JavaScript | MDN

App審査 ios

日本語で返信しても理解してくれてるっぽい!

タスク管理

アプリを作っていれば

「ここはこうしたいな」、「機能追加したらこっちにも影響あるのか。。」

とかいろんなやりたいこと、やらなきゃならないことが出てきました。

最初はアナログにポストイット使っていましたが、、、

使い勝手が悪い💦

そこでGitHubのプロジェクトを使って見ることにしました。

GitHubでタスク管理ができる新機能「Project」超入門 – Qiita

他に似たようなサービスを使ったことないけど、これが一番いい👍

シェアする

  • このエントリーをはてなブックマークに追加

フォローする