2
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

はじめてのReactNative

Last updated at Posted at 2021-11-17

ReactNativeとは

React(JavaScript)1つで、WEBアプリ、スマホアプリ(iOS/Android用)を開発できる優れもの。

図1.png

Expoとは

Expoを使うと、開発段階から公開までストレスフリーになってとても便利。

Expoのメリット

開発がラク

実機で確認する場合、スマホにExpoのアプリをインストールしておくと、
今開発中のアプリがリアルタイムで反映されて確認できる。
さらに、複数の人とリリース前のアプリ共有が可能(iPhoneではアカウントの制約あり)。

公開がラク

各ストアにアップするための、ファイルの作成をコマンドひとつでできる。
Appleの場合は、通常のだとアプリのアップデートも審査が必要だが、
Expoを使うと審査なくアプリのアップデートをコマンドひとつで行える。

Expoのデメリット

Expoを使うと使えない機能がある。
アプリ内課金や、バックグラウンド実行、Bluetooth, NFCなどなど。

公式ページ:https://docs.expo.dev/introduction/why-not-expo/?redirected

公式ページの左側に項目があっても、実際には使えないなんてことも・・・
各項目の内容をちゃんと読めば使えるのか使えないのか書いてあるそうです。
https://docs.expo.dev/versions/latest/#each-expo-sdk-version-depends-on-a

ReactNativeとExpoでスマホアプリ開発

開発環境を整える

アプリ開発

プロジェクトの立ちあげかた

Expoでアプリを共有する方法

アプリ開発を補助してくれるESLint

ソースコードの書き方に統一感を持たせてくれる。
例えば、ライブラリのインポートにダブルコーテーションを使っていると、「シングルコーテーションで統一してください」みたいな注意をしてくれる。

ESLintが入っている空のプロジェクト

簡単なアプリを作ってみる

ReactのHooksや関数型プログラミング、レンダリングに付いて記述したもの↓

ストアへの公開方法

おすすめUIコンポーネント

Vuetify的な見た目

QRコードを読み込めば自分の端末ですぐ確認できる。

スマホアプリ開発の注意点

CSSはiosとandroidで効くものと効かないものがある

shadowはiosだけにしか効かない
elevationはandroidだけ
他にもデフォルトの設定が両者で違っていたりする。

2
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
2
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?