目次
環境構築
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
Prettier 入門 ～ESLintとの違いを理解して併用する～ – Qiita
ReactNative ライブラリ
react-native-textinput-effects
reactのバグ？で日本語の入力がおかしくなっているので、
react-native-textinput-effectsは使えなくなっている。
（つかいたかったなぁ）
Firebase
匿名認証
JavaScript を使用して 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,
AsyncStorageis backed by native code that stores small values in a serialized dictionary and larger values in separate files. On Android,AsyncStoragewill use either RocksDB or SQLite based on what is available.
RocksDBはjs対応してないし、SQLiteはsql使わないといけないし、で
AsyncStorageを使うのを諦めて、
realmを使おうとしたけど、expo対応してないしで、
もうやけくそになって、適当にコピペしたらできた。。。(；ω；)
サンプルコードを作ったpradeep singhさんgit眺めてたら響く言葉があったから書
技術は個人を解放するために使用する必要があります！
React の書き方
thisの参照先が変わる！
onPress={this.onPressButton}
上記のコードでボタンなどがタッチされた時にonPressButtonメソッドを実行することができます。
しかしこれでは、thisの参照先がクラスではなく、メソッド自体になります。
クラスを参照したい場合は下記の通りに、
onPress={() => this.onPressButton()}
理由は・・・
state
他のコンポーネントからstateを変えたい時
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アプリ再起動してみる！
新しいライブラリを入れると必ずおかしくなる。
入れた直後は大丈夫で、５分くらいして原因不明のエラーになることがあるので注意。
ライブラリを入れたときは再起動が安全、
React Native 便利API
オフラインとオンラインを判断する！NetInfo
√ FirebaseとAsyncStorageの使い分けとかに使える
アプリを開いた時にstateを変えたい！AppState
√ このAPIを使えばアプリを開いた時にsetStateを行い、再レンダリングすることができます。
EXPO
画面の向き固定
react-nativeのreact-native-orientationというライブラリがありますが、expoならもっと簡単に制御できます。
例えば、縦方向固定にしたい場合は“orientation”: “portrait”をapp.jsonのEXPOのところに追加するだけです。
画面別に固定にするかどうかも設定できます。
Expo.ScreenOrientation.allow(orientation) とかで
chromeでコンソールログを見る
詳しくは上のリンクから。
iosシミュレータで⌘D、
で、開いたメニューからそれっぽいのを選ぶ！
app storeの言語表記が英語に！？
上のように、言語が英語になってしまいました。
特に設定しないと英語になるようです！
そこで！
"expo":{
...
"ios":{
"infoPlist":{
"CFBundleDevelopmentRegion":"ja_JP"
}
}
}
上のような設定を加えるよいいようです！
詳しくは参考先をご覧ください。
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)”.
ios – How to use Mac keyboard while Simulator keyboard is on the screen – Stack Overflow
または、HardWare の Keyboard を選択し、下の画像通りに、
ios – How to use Mac keyboard while Simulator keyboard is on the screen – Stack Overflow
ESlint
ESlintにイラついた時。
ESLint対応物語 ~no-restricted-syntax~ – Qiita
上のリンク先を読めば救われるかも・・・
便利な書き方を知るきっかけだと思うようにしてます。
App審査 ios
日本語で返信しても理解してくれてるっぽい！
タスク管理
アプリを作っていれば
「ここはこうしたいな」、「機能追加したらこっちにも影響あるのか。。」
とかいろんなやりたいこと、やらなきゃならないことが出てきました。
最初はアナログにポストイット使っていましたが、、、
使い勝手が悪い💦
そこでGitHubのプロジェクトを使って見ることにしました。
GitHubでタスク管理ができる新機能「Project」超入門 – Qiita
他に似たようなサービスを使ったことないけど、これが一番いい👍