- Expo SDK
- Expo でアプリを作るために必要なあれこれを集めたパッケージ
- 3ヶ月に1回の定期リリース
- React NativeでもExpo Modules(旧unimodule)として利用可能
- Expo CLI
- Expo で開発するときに便利なツールを集めた CLI
- init: アプリの雛型を生成する
- install: Expo SDK と互換性のある npm パッケージをインストールする
- start: 開発サーバーを起動する
- build: iOS/Android/Web 向けにアプリをビルドする
- publish: expo.dev のサーバーにアプリをアップロードする。OTA アップデートもできる
- Expo で開発するときに便利なツールを集めた CLI
- Expo Go
- Expo でアプリを開発するためのクライアント。いわゆるシミュレーターと異なり、手元のスマートフォン上で動く
- Expo Go には Expo SDK に含まれていないネイティブコードを呼び出すことはできないという制約がある。
- Expo Snack
- ブラウザで試せるPlaygroundツール
- 課金で順番待ちをスキップできる
- Expo Application Services (EAS)
- 次世代のExpo Cli
- CI/CDが可能
- build: アプリのバイナリをビルドすることができる。
- submit: Expo が運営するサーバーから App Store と Google Play Store にアプリをアップロードすることができる。
- update: OTAアップデート
Installation - Expo Documentation
3つのネットワーク
- localhost
- LAN
- Tunnel(expo.devを通して)
Expo Goの使い方
Core Components and Native Components · React Native
特徴
- コンポーネントの利用にはインポートが必要
- OSによっては利用できないものもある
View Flattening · React Native
ネイティブのAPIをJSをを通して呼び出す
AccessibilityInfo · React Native
インラインでは<View style={{backgroundColor: "#fff"}}>
CSSとの違い
- 「-」の代わりにキャメルケース
- 基本単位がdp(デバイス密度非依存ピクセル)
- 異なるたん丸の異なる解像度でも同じように表示
- FlexBoxが基本
Layout with Flexbox · React Native
- NativeBase: Universal Components for React & React Native
- RNUILib
- React Native Paper
- React Native Elements | React Native Elements
- UI Kitten - React Native UI Library based on Eva Design System
Navigating Between Screens · React Native
yarn add -D eslint-config-universe
yarn add -D eslint prettier @typescript-eslint/eslint-plugin @typescript-eslint/parser
※ @react-native-community/eslint-config
- package.json
{
"eslintConfig": {
"extends": "universe/native"
},
}
- .prettierrc
{
"tabWidth": 2
}
yarn add @react-navigation/native
expo install react-native-screens react-native-safe-area-context
https://reactnavigation.org/docs/getting-started/
yarn add @react-navigation/native-stack @react-navigation/stack
- stack:左右にスライドしながら画面を切り替える < native stack
- tabs:タブを選択することで画面を切り替える
- drawer:画面端から現れるサイドメニューで画面を切り替える
yarn add native-base
expo install react-native-svg
expo install react-native-safe-area-context