【ツール】PC移行用メモ書き
Chrome
https://www.google.co.jp/chrome/browser/desktop/index.html
Cyberduck
https://cyberduck.io/
Sequel Pro
https://www.sequelpro.com/
Table Plus
Source Tree
https://ja.atlassian.com/software/sourcetree
Visual Code
https://azure.microsoft.com/ja-jp/products/visual-studio-code/
Postman
https://www.getpostman.com/
Chatwork
https://go.chatwork.com/ja/download/
zoom
https://zoom.us/jp-jp/meetings.html
microsoft teams
https://www.microsoft.com/ja-jp/microsoft-365/microsoft-teams/group-chat-software
Apowermirror
============================================
macの設定
mac のバーを移動する
「システム環境設定」 > 「Dockとメニューバー」
「画面上の位置」
【React Native】まとめ
(参考)
■ 型
any :「型チェックしない」ことを示す
void :「他のどの方でもない」ことを示す
tuple :組み合わせ
(例)
var tuple: [number, string] = [1, ‘a’]
■ interface
新しい型を作成したいとき
■ プロパティの末尾に、?
→指定が任意であることを指示するための書き方
■ 拡張子
.ts ファイル
TypeScriptファイルを示す
.tsx ファイル
TypeScriptファイル、かつ、JSX含む
■ Homebrew
brew —version
■ yarn(ヤーン)のインストール
brew install yarn
→ yarnは、npmと比較して高速に動作するパッケージマネージャ
■ watchman:ReactNative動作するための監視ツール
brew install watchman
watchman —version
■ CocoaPods:Swift・Objective-C のパッケージマネージャ
(ReactNavieは、iOSにおいてはネイティブコードをCocoaPodsで管理する。Rubyで書かれてるためgemコマンド)
sudo gem install cocoapods
pod —version
■ Metro Bundler:アプリを起動する際に、同時に起動され、サーバとして動作する
■ キャッシュクリアしたいとき(ディレクトリー名の変更 or ソースファイルの移動が反映されない場合)
npx react-natvie start —reset-cache
npx react-native start :Metro Bundlerを起動するためのコマンド
—reset-cache :キャッシュを消去するオプション
■ Viewコンポーネント
divにあたる。何にも表示しない。
「親」として使うことが多い。必要のないところで使うと、メモリが無駄
■ Textコンポーネント
Textのみの入れ子で、スタイルのカスケードが可能
※カスケード
CSS(Cascading Style Sheets)のCascadingとは
「階段状の滝のような」「連鎖的に伝わる」という意味
(参考)
http://www.htmq.com/csskihon/006.shtml
■ flexDirection:配置
column :上から下へ配置 デフォルト値
row :左から右へ配置
■ justifyContent:配置ルール(flexDirection方向)
flex-start :始端側に詰める。デフォルト値
flex-end :終端側に詰める
center :中央寄せ
space-between:最初を始端、最後は終端、残りは等間隔
space-around:コンポーネントの周りのスペースを全て等しく
space-evenly:スペースを全て等間隔
■ alignItems:配置ルール(flexDirectionと直角方向)
flex-start :始端側に詰める。デフォルト値
flex-end :終端側に詰める
center :中央寄せ
stretch:スペースいっぱいに子コンポーネントを引き伸ばす
baseline:ベースラインにそろえる
■ props:コンポーネントの入力(外部から渡される)
親 → 子へデータを渡す
■ state:コンポーネントそのものが持つデータ
stateを使うためには、useStateを用いる
※props もしくは state の内容が変更されると再描画
■ useEffect:非同期させたいとき(副作用)
(引数)
第1引数:指定した関数を実行
第2引数:変数(この変数が変更されたタイミングで、第1引数の関数が実行される)配列で複数指定可能。指定しないことも可能(初期表示時のみ動作するイメージ)
(イメージ)
useEffect フックを
「componentDidMount と componentDidUpdate と componentWillUnmount がまとまったもの」と考えてOK
(参考)
https://ja.reactjs.org/docs/hooks-effect.html
■ Context:全コンポーネントからアクセス可能なグローバル変数..というイメージ
ユーザの属性値などを保持するイメージ(頻繁に変わる変数ではなく)
■ ref:コンポーネントの描画結果を変数に格納。アクセス可能とする。
reference の略。描画済みコンポーネントへの参照を与える
(例)
コンポーネントが持つメソッドを呼び出したい場合
■ サフィックス(なし・@2x・@3x)
画面の表示密度によって
実際に読み込まれるファイルが異なる
(表示密度に近いサフィックスを持つものが使用される)
サフィックスなし : 等倍 : logo.png
サフィックス@2x : 2倍 : logo@2x.png
サフィックス@3x : 3倍 : logo@3x.png
■ 表示密度
論理的なピクセル1つが物理的なピクセルいくつ分に相当するか表した数字
(PixelRatio.get関数で確認可)
■ 画像管理(iOS・Android)
iOS:Asset Catalog
→ Xcodeの Images.xcassets
Android:drawable
→ android/app/src/main/resディレクトリ
以下のディレクトリ名
drawable-mdpi :100%「大きさ」
drawable-hdpi :150%
drawable-xhdpi :200%
drawable-xxhdpi :300%
drawable-xxxhdpi:400%
「大きさ」は、画像ファイルの大きさをどの程度拡大すればよいのかを示す
ファイル名は、すべて同一とする
■ 画像
uriにネットワーク上の画像(URL)の指定可
画像はキャッシュされ、次回から高速に表示される
■ 画像の使い分け
UI に必要な画像・・・JavaScript層で管理
コンテンツ画像・・・ネットワーク経由
(メリット / デメリット)
JavaScript層で管理:大きな画像だと、アプリサイズが肥大。インストール時にユーザーに不利益
ネットワーク経由:初回表示に時間がかかる。ユーザが操作に困る
■ resizeMode
Imageコンポーネントで、リサイズ必要な場合
(resizeModeで指定可能な値)
cover:余白ができないよう画像を拡大/縮小。アスペクト比を保持。
contain:画像すべてが表示されるよう画像を拡大/縮小。アスペクト比を保持。
stretch:画像すべてが表示されるよう画像を拡大/縮小。アスペクト比を保持しない。
repeat:拡大縮小せず、左上から右上へ画像を敷き詰める。
center:拡大縮小せず、表示領域の中心を画像の中心とする。
※アスペクト比とは、画面や画像の縦と横の長さ(画素数)の比
(表示サイズのパターン)
1 width:400 height:300
2 width:200 height:100
3 width:400 height:50
4 width:50 height:400
■ ScrollViewコンポーネント
スクロール可。
■ FlatList
配列を表示する際に便利
FlatListには、以下2つのpropsが必須
data:表示すべき配列
renderItem:配列内の各データをどのように描画するか
■ renderItem関連:指定する関数の引数
item:配列内の各データ →普段は、こちらのみ
index:配列の何番目にあるかのインデックス
separators:各データの間に表示する区切りを操作するための関数群
■ renderItem関連:ヘッダー・フッター
ListHeaderCompornent:ヘッダー
ListFooterComponent:フッター
■ SectionList
いくつかのグループに分かれているデータを表示するのに便利
(データ構造の指定が必要)
■ FlatList のkey
データに一意な識別子を指定する必要がある
id
key
keyExtractor
■ horizontal
FlatList で横スクロールしたい場合
■ numColomns:複数列の表示を指定できる
※horizontal と同時に指定することができない
■ refreshing:現在データの更新中かどうか示すboolean値
onRefresh に、ユーザがリストを下に引っ張ってデータ更新した場合の
コールバック関数を指定
※ Pull To Refresh = 下に引っ張って更新
■ onEndReached:データ最後のアイテムが表示された場合
■ Touchable 系コンポーネント
(ボタンのコンポーネント)
TouchableWithoutFeedback:押下した際、見た目が変化しない
TouchableNativeFeedback:(Androidのみ)リップル効果を付与できる
TouchableOpacity:押下した際、透過度が変動
TouchableHightLight:押下した際、背景色が変動
(コールバック関数)
onPress
(非活性)
disabled
■ Button コンポーネント
簡易なボタン
■ TextInputコンポーネント
文字入力を受け取るコンポーネント。
value:入力欄に表示すべき値
onChangeText:入力が変更された場合に呼ばれるコールバック関数
(TextInput のprops)
multiLine:改行を許可するかどうか
placeholder:プレースホルダー
returnKeyType:完了ボタンのラベル
secureTextEntry:非表示化
editable:編集可否
keyboardType:表示するキーボード
autoCapitalize:文字を自動的に、大文字に変換
autoCompleteType:補完時の文脈を与える
autoCorrect:自動補完の有効にするかどうか
maxLength:最大入力長
■ StatusBarコンポーネント
ステータスバーの見た目
■ ActivityIndicatorコンポーネント
何か処理している最中であることを示す(検索中みたいな場合)
■ Switchコンポーネント
on/off を示すUI
■ AppState ユーティリティ:現在のアプリの状態、変更した際の処理
(アプリが取り得る状態)
active :前面
inactive :起動アプリ一覧画面、backgroundへ移行する間(iOSのみ)
background:ホーム画面 or 他アプリが前面にある
■ Dimensions ユーティリティ
デバイスサイズの取得 or 向きが変わった場合の処理
■ Linking ユーティリティ
URLを開く
■ PermissionsAndroid ユーティリティ
Androidのみ。アプリに許可する機能:都度ユーザにモーダルダイアログで確認してもらう
(参考)
カメラの使用したい場合は以下に追加
android/app/src/main/AndroidManifest.xml
<uses-permission android:name=“android.permission.CAMERA” />
============================================
パフォーマンス最適化
(参考)
(上記より抜粋)
■メインスレッド(Native)側 = UI
・useNativeDriver
→Animated.timing してる場合にtrueとすると改善するかも
■JavaScriptスレッド(ビジネスロジック)側 = ビジネスロジック
レンダリング
※レンダリング回数 = state更新回数 × 更新対象のコンポーネント数
state更新
・useRef(画面描画と関係ない変数はuseRef)
・そもそも更新を減らす
更新対象のコンポーネント
・memo化(もしくは、pureComponent):propsに変化ない(=浅い比較)場合、再レンダリングしない
※ツール
why-did-you-renderでチェックできる
【アプリ】ビルド(Android)
[ビルド手順]
■Android Studioを起動
Build > Build Bundle(s) / APK(s) > Build APK(s)
※Duplicate resourcesエラーとなった場合
node_modules/react-native/react.gradle l.48
下記リンクの doLast の処理を追加する必要があります。
https://github.com/facebook/react-native/issues/22234#issuecomment-476596833
■ビルドを行う際に、変更が反映されない場合のコマンド
react-native bundle --platform android --dev false --entry-file index.js --bundle-output android/app/src/main/assets/index.android.bundle --assets-dest android/app/src/main/res
■その他不具合が起きた際などで使うコマンド
cd android
./gradlew cleanBuildCache
cd ..
react-native start --reset-cache
■Build > Generate Signed Bundle / APK...
■APK > Next
keyAlias (作成時に入力した値)
keyPassword (作成時に入力した値)
storePassword (作成時に入力した値)
release > Finish
■apkファイルが作成されます
(例)
(プロジェクトフォルダ)/android/app/release/app-release.apk
※ apkファイルは、Firebase Console のApp Distributionから配信できます
[事象]
AndroidStudioでビルド
→ビルド終わらない
minify Release WithR8 Expiring Daemon because JVM heap space is exhausted
[対応]
gradle.properties に以下を記述
(参考)
https://stackoverrun.com/ja/q/12934780
【React Native】エラー対応
■エラー
"IPA processing failed” in Xcode 12.4 with MAC M1
M1 Macでアーカイブでエラー
(対応)
■アプリケーション > Xcode.app
情報を見る
「Rosetta を使用して開く」をチェック
■アプリケーション > ユーティリティ > ターミナル.app
情報を見る
「Rosetta を使用して開く」をチェック
(参考)
■エラー
console.error "React Native version mismatch.
JavaScript version: 0.61.5
Natvie version: 0.63.3
[対応]
watchman watch-del-all && react-native start —reset-cache
■エラー
error listen EADDRINUSE: address already in use :::8081
ポートの衝突
[対応]
一度使用しているポート8081を消去してから、再度立ち上げる
//ポートのPIDを特定する
lsof -i :8081
//消去
kill -9 PID
(参考)
https://qiita.com/shumatsukishu/items/68755725a9370c119c8c
■エラー
error Could not find the following native modules: react-native-camera. Did you forget to run "pod install" ?
(対応)
cd ios
pod install --repo-update
(参考)
pod repo update を実行することで、任意のタイミングでキャッシュを更新することが出来る。
リリース済みのバージョンであるにもかかわらず、Podfile 上で指定されたバージョンのライブラリが見つからない、もしくは最新のバージョンが入らない(Podfile 上でバージョンの指定がない場合には、そのライブラリの最新バージョンが取得される)場合には、これによって対処できるかもしれない。
https://qiita.com/msh5/items/c35717b27975c9e48d15
■エラー
error React Native CLI uses autolinking for native dependencies, but the following modules are linked manually:
- react-native-camera (to unlink run: "react-native unlink react-native-camera")
(対応)
react-native unlink react-native-camera
■エラー
ExceptionsManager.js:179 Error:
`createStackNavigator()` has been moved to `react-navigation-stack`.
See https://reactnavigation.org/docs/stack-navigator.html for more details.
(対応)
https://www.366service.com/jp/qa/a78df5ad655f7b59b58259d70bd13c9d
以下のコマンドで追加
react-native install react-navigation-stack save
■エラー
ExceptionsManager.js:179 Error:
undefined Unable to resolve module `@react-native-community/masked-view` from `node_modules/react-navigation-stack/lib/module/vendor/views/MaskedViewNative.js`: @react-native-community/masked-view could not be found within the project.
(対応)
yarn add @react-native-community/masked-view
もしくは
npm install --save @react-native-community/masked-view
(参考)
https://qiita.com/kum44/items/982086c79a09b14e7afc
キャッシュのクリア
lsof -n -P -i :8081 -t | xargs kill
rm -rf ios/build
rm -rf android/app/build
rm -rf node_modules
yarn
(起動)
yarn react-native run-ios
■エラー
Unable to resolve module react-native install react-natvie-safe-area-context save
(対応)
npm i react-native-safe-area-context
(参考)
https://www.npmjs.com/package/react-native-safe-area-context
■エラー
Unable to resolve module react-native-screens
(対応)
npm install --save react-navigation react-native-gesture-handler react-native-reanimated react-native-screens
(参考)
https://dev-yakuza.posstree.com/react-native/react-navigation/
■エラー
ExceptionsManager.js:179 Error:
`createBottomTabNavigator()` has been moved to `react-navigation-tabs`.
See https://reactnavigation.org/docs/bottom-tab-navigator.html for more details.
(対応)
npm install --save react-navigation-tabs
■エラー
Could not find store in the context of Connect(Home) Either wrap the root component in a Provider
(対応)
おそらく、、、書き方が変わったのかも
React Redux 7.1.0からフック(Hook)が備わりました
昔
import { connect } from 'react-redux'
今
import { useSelector, useDispatch } from 'react-redux';
(参考)
http://www.fumiononaka.com/Business/html5/FN2004004.html
■エラー
シミュレータ起動時に
Print: Entry, “:CFBundleIdentifier”, Does Not Exist
[対応]
x-codeで起動すると解決したりする
https://www.haneca.net/react-native-cfbundleidentifier-error/
【React Native】環境構築・コマンド
新しいプロジェクト作成
npx react-native init MyApp
依存パッケージをインストール
cd MyApp
yarn
ネィティブ層における依存パッケージをインストール
cd ios
pod install —repo-update
必要なツールがインストールされているかチェック
npx react-native doctor
バージョン確認
react-native info
起動(いろいろある)
yarn react-native run-ios
react-native run-ios --simulator "iPhone 11"
npx react-native run-ios
(参考)npx の良いところ
github gistにあげているパッケージがあるとして、以下のコマンドを打つと、インストールなしで実行できる
以下は非推奨かもしれない(react-native-cli)
npm install -g react-native-cli
アンインストールする場合
npm uninstall -g react-native-cli
Androidエミュレータ確認(もしくは、Android端末を直接USB接続できてるか確認)
adb devices
※Android端末を直接USB接続して認識されてる場合は
Android Studioからインストール可能
(キャッシュのクリア関連)
# watchmanのキャッシュを削除
watchman watch-del-all
# iosのビルドファイルを削除
rm -rf ios/build
# androidのビルドファイルを削除
rm -rf android/app/build
# node_modulesを削除
rm -rf node_modules
# Xcodeのキャッシュを削除
rm -rf ~/Library/Developer/Xcode/DerivedData
# yarnをインストール
yarn install
# podをインストール
cd ios
pod install
# androidのビルド環境をクリア
cd ../android
./gradlew clean cleanBuildCache
# metro bundlerを再起動
cd ..
yarn start -- --reset-cache
# metro bunlderが起動したらControl + Cでmetro bundlerを落とす
(参考)
Metro Bundler
(ツール)
ターミナル上で動作する
アプリを起動する際、同時に起動されサーバとして動作
すべてのファイルを1つにまとめて返却(1つのJavaScriptファイルにまとめることをバンドルと呼ぶ)
Metro Bundlerの注意点
キャッシュ古いままで更新されない場合あり
(対応)
Metro Bundlerを終了
以下を実行
npx react-native start —reset-cache
(参考)
キャッシュクリア
lsof -n -P -i :8081 -t | xargs kill
rm -rf ios/build
rm -rf android/app/build
rm -rf node_modules
yarn