Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
React Native 製アプリで Android 版をリリースする際にハマったポイント 2 選
Search
Ichiki
October 04, 2024
Technology
0
130
React Native 製アプリで Android 版をリリースする際にハマったポイント 2 選
React Native Meetup #18 ft. CureApp 登壇資料
https://react-native-meetup.connpass.com/event/329486/
Ichiki
October 04, 2024
Tweet
Share
More Decks by Ichiki
See All by Ichiki
一度 Expo の採用を断念したけど、 再度 Expo の導入を検討している話
ichiki1023
1
540
mixi2 の技術スタックを探ってみる (アプリ編)
ichiki1023
0
280
Other Decks in Technology
See All in Technology
ヘブンバーンズレッドのレンダリングパイプライン刷新
gree_tech
PRO
0
550
AI駆動開発に向けた新しいエンジニアマインドセット
kazue
0
210
スプリントレトロスペクティブはチーム観察の宝庫? 〜チームの衝突レベルに合わせたアプローチ仮説!〜
electricsatie
1
160
Obsidian応用活用術
onikun94
1
390
AI開発ツールCreateがAnythingになったよ
tendasato
0
110
RSCの時代にReactとフレームワークの境界を探る
uhyo
9
3k
テストを軸にした生き残り術
kworkdev
PRO
0
170
役割は変わっても、変わらないもの 〜スクラムマスターからEMへの転身で学んだ信頼構築の本質〜 / How to build trust
shinop
0
160
ヒューリスティック評価を用いたゲームQA実践事例
gree_tech
PRO
0
540
【 LLMエンジニアがヒューマノイド開発に挑んでみた 】 - 第104回 Machine Learning 15minutes! Hybrid
soneo1127
0
290
自作JSエンジンに推しプロポーザルを実装したい!
sajikix
1
150
進捗
ydah
2
230
Featured
See All Featured
Principles of Awesome APIs and How to Build Them.
keavy
126
17k
Building a Modern Day E-commerce SEO Strategy
aleyda
43
7.5k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
231
53k
Fantastic passwords and where to find them - at NoRuKo
philnash
52
3.4k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
667
120k
Large-scale JavaScript Application Architecture
addyosmani
512
110k
Bootstrapping a Software Product
garrettdimon
PRO
307
110k
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
656
61k
Typedesign – Prime Four
hannesfritz
42
2.8k
Embracing the Ebb and Flow
colly
87
4.8k
Six Lessons from altMBA
skipperchong
28
4k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
46
7.6k
Transcript
React Native 製アプリで Android 版をリリースする際 にハマったポイント 2 選 Ichiki Sato
(@ichiki1023)
自己紹介 Ichiki Sato (@ichiki1023) 株式会社マイベスト (2024 年 4 月から! )
現在育休中の 2 児の父 React Native は 3 年のブランクを経て 4 月から 奮闘中 経験としては iOS/Web のみで Android は未経験
マイベスト - 商品比較サービス
今日のおはなし iOS Only だった React Native 製 のアプリで Android 版をリリースするまでに特にハマ
ったポイントが 2 つあったのでそのお話をさせてください!
ハマったポイント 1. テキストの高さがズレる問題 2. 画像周りのパーミッション問題
はじめに ビルドを通すために色々設定した やったことの例 環境変数の設定 モジュールのアップデート React Native Firebase の Android
対応
思っていたよりもすぐに起動できた
ただよく見ると。 。
None
なんかズレてる。 。
ハマったポイント 1. テキストの高さがズレる問題
分かったこと Android のデフォルトのフォントは日本語だと NotoSansCJKJP 上記だと lineHeight が大きめに勝手に設定されている (っぽい ) 調査した感じだとおおよそ
10~15% フォントそのものに includeFontPadding も効いてなさそう フォント上部の方が余白が大きいので下にズレて見える デフォルトではなくフォントをダウンロードして NotoSansJP にしても変わらなか った 参考 : Android アプリで Line Height を 設定するときに注意したいこと 1. テキストの高さがズレる問題
対策 Android のみ lineHeight を 1.1 で割り縮小することでデフォルトで加わっている余 分差をなくす (1.1 ~
1.15 を比較 & 計算した結果最適な値を設定 ) マイベストでは基本的に lineHeight まで細かくデザインシステムで管理しているため、 縮小することで本来の期待するデザインに力技で合わせにいく 1. テキストの高さがズレる問題
改善後 1. テキストの高さがズレる問題
ハマったポイント 2. 画像周りのパーミッション問題
(iOS での経験上 ) パーミッションをしっかりと定義しておかないと ストアの審査で Reject を受ける可能性が高いので、追加しておく 2. 画像周りのパーミッション問題
画像周りの権限追加 マイベストのアプリで取得していた主な権限 写真 (プロフィール写真用 ) カメラ (プロフィール写真用 ) android/app/src/main/AndroidManifest.xml に画像周りで必要な権限を追加しておく
<uses-permission android:name="android.permission.CAMERA"/> <uses-permission android:name="android.permission.READ_MEDIA_IMAGES"/> 2. 画像周りのパーミッション問題
ただ、使用しているライブラリにこんな一文が ref: https://github.com/react-native-image-picker/react-native-image-picker? tab=readme-ov-file#android-1
権限不要。 。 。? プロフィール画像の写真選択 & 撮影をするのに権限不要 ? react-native-image-picker を使用していたが、 Android
の場合権限は不要なことが 判明。 ref: https://github.com/react-native-image-picker/react-native-image-picker? tab=readme-ov-file#android-1 2. 画像周りのパーミッション問題
なぜ? 2. 画像周りのパーミッション問題
権限が不要な理由の深堀り ① react-native-image-picker の内部実装を見てみる if (Build.VERSION.SDK_INT < Build.VERSION_CODES.TIRAMISU) { if
(isSingleSelect && (isPhoto || isVideo)) { libraryIntent = new Intent(Intent.ACTION_PICK); } else { libraryIntent = new Intent(Intent.ACTION_GET_CONTENT); libraryIntent.addCategory(Intent.CATEGORY_OPENABLE); } } else { libraryIntent = new Intent(MediaStore.ACTION_PICK_IMAGES); } https://github.com/react-native-image-picker/react-native-image- picker/.../ImagePickerModuleImpl.java#L128C1-L137C10 2. 画像周りのパーミッション問題
if (Build.VERSION.SDK_INT < Build.VERSION_CODES.TIRAMISU) { if (isSingleSelect && (isPhoto ||
isVideo)) { libraryIntent = new Intent(Intent.ACTION_PICK); } else { libraryIntent = new Intent(Intent.ACTION_GET_CONTENT); libraryIntent.addCategory(Intent.CATEGORY_OPENABLE); } } else { libraryIntent = new Intent(MediaStore.ACTION_PICK_IMAGES); } Intent というものが使われていて、バージョンと画像の選択数によって使用するアクシ ョンを分けているみたい。
権限が不要な理由の深堀り ② 先ほどのコードを訳すとこんな感じ 13 未満かつ単一の選択 : Intent.ACTION_PICK を使用する 13 未満かつ複数の選択
: Intent.ACTION_GET_CONTENT を使用する 13 以降 : MediaStore.ACTION_PICK_IMAGES (PhotoPicker)を使用する 2. 画像周りのパーミッション問題
Intent とは? https://developer.android.com/guide/components/intents-filters?hl=ja Intent は、アクションのリクエストに使用できるメッセージ オブジェクト 別のア プリ コンポーネントから。 2.
画像周りのパーミッション問題
。 。 。 。 。 。 。 2. 画像周りのパーミッション問題
色々調べた結果 アクションを指定すると、それを実行できる端末上のアプリが起動されるものらし い。 2. 画像周りのパーミッション問題
つまり react-native-image-picker では Intent が使用されている Intent はアクション(動作)を指定して、それを実行できる端末上のアプリを起動 する仕組み Intent を使用して画像の選択を
PhotoPicker 含めて外部アプリに任せると個別のア プリ側では権限取得は不要になる ということらしい 2. 画像周りのパーミッション問題
なるほど! 2. 画像周りのパーミッション問題
不必要なパーミッションは削除しておく 不要なことが判明したので追加していた権限を AndroidManifest.xml から削除する 2. 画像周りのパーミッション問題
その後無事 2024/09/25 に 1st リリース公開完了 権限周りも問題なかった!
まとめ iOS 版でアプリケーションとしての形はできていたので、コードを直接修正するの はごくわずかで済んだ (React Native 最高 ) ただし Android
の前提知識はかなり必要なのでひたすらキャッチアップをしていく 必要があってそれが大変
ご清聴ありがとうございました