- 投稿日:2020-09-20T21:30:13+09:00
DockerでReact Native(TypeScript)+Expoのプロジェクト構築
まえおき
React Native+Expoで構成されたプロジェクトのDockerコンテナをMac OS X上に構築する手順を記載しています。
各端末の情報
PC
- Mac OS Catalina Ver.10.15.6
- docker version 19.03.12, build 48a66213fe
- docker-compose version 1.26.2, build eefe0d31
iPhone
- iPhone XR
- iOS:13.7
ExpoClientで動作検証済みの端末
- iPhone(iOS:13.7)
前提
- docker, docker-compose導入済み
手順
1. Expoアカウントを作成します
2. Expoクライアントアプリのインストールとセットアップをおこないます。
iPhoneでExpoクライアントアプリのインストールとセットアップ方法
3. Docker環境を構築します
ファイル構成
root └── docker └── react_native └── dockerfile └── docker-compose.yml └── .envdocker/react_native/dockerfile
FROM node:14-alpine WORKDIR /usr/src/app/ RUN apk update && apk add bash RUN yarn global add expo-clidocker-compose.yml
version: "3" services: react_native: build: ./docker/react_native volumes: - ./react_native/:/usr/src/app env_file: .env command: yarn start ports: - "19000:19000" - "19001:19001" - "19002:19002".env
Expoを利用する各端末のIPなどを設定する必要があります。
- ADB_IP
- 検証端末のIPアドレスを指定してください。カンマ区切りで複数指定可能なようです。
- REACT_NATIVE_PACKAGER_HOSTNAME
- Dockerコンテナ可動端末のIPアドレス
例ADB_IP=192.168.0.10,192.168.0.11,... REACT_NATIVE_PACKAGER_HOSTNAME=192.168.0.24. Dockerコンテナをビルドします
docker-compose build5. Dockerコンテナへ接続します
docker-compose run --rm react_native bash --login6. expoプロジェクトを作成します
expo init .7. プロジェクトテンプレートを選択するとプロジェクトのセットアップが開始されます
わたしは[blank (TypeScript)]を選択しました。
? Choose a template: (Use arrow keys) ----- Managed workflow ----- blank a minimal app as clean as an empty canvas ❯ blank (TypeScript) same as blank but with TypeScript configuration tabs several example screens and tabs using react-navigation ----- Bare workflow ----- minimal bare and minimal, just the essentials to get you started minimal (TypeScript) same as minimal but with TypeScript configuration8. セットアップが完了したらコンテナから抜けます
9. Dockerコンテナを起動します
docker-compose up10. 表示されたQRコードを検証端末上で読み取ります
11. 検証端末でExpo Clientアプリが起動しREACTの画面が表示されます
12. react_native/App.tsxを更新すると・・・
react_native/App.tsxのファイル内に記述された表示テキストの末尾に☺️を追加してファイルを更新します。
13. 更新した内容が検証端末へ自動的に反映されます
ホットリロードによって末尾の☺️がiPhone上の検証画面へ自動的に反映されます。
参考
DockerでReact Native環境作成から、Expo Clientで実機確認するまで
WSLでReact Native + Expo環境を作ろう
DockerでExpo / React Nativeを実行する
- 投稿日:2020-09-20T09:20:07+09:00
【Vue.js】クリック処理 @click
【ゴール】
Vue.jsを用いてクリック処理を実施
【環境】
mac catarina 10.156
Vue.js v2.6.12
【実装】
index.html<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <div id="app"> <p>{{number}}</p> <button @click="increaseNumber">増やす</button> </div> . . . <script> new Vue({ el: '#app', //対象を取得 data: { number: 0 //numberをセット }, methods: { increaseNumber: function(){ return this.number += 1; //numberに対して、1ずつ加えていく } } }) </script>【まとめ】
■ htmlでは、{{}}でvuejsのデータを表示
■ vuejsでは@click等の便利なディレクティブが多数ある【オススメ記事】
■ 【Vue.js】 IF文・For文 条件分岐、繰り返し処理
https://qiita.com/tanaka-yu3/items/0ccf9a11525331b764de■ 【node.js】ルーティング設定ホーム画面表示させる。
https://qiita.com/tanaka-yu3/items/1c8859e16070e67d73c0■ 【node.js】 node.jsインストール 芋っていたけど、簡単だった件...
https://qiita.com/tanaka-yu3/items/739db5ffed24a8d9ae4b