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
92
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
160
mixi2 の技術スタックを探ってみる (アプリ編)
ichiki1023
0
160
Other Decks in Technology
See All in Technology
エンジニアが加速させるプロダクトディスカバリー 〜最速で価値ある機能を見つける方法〜 / product discovery accelerated by engineers
rince
1
190
明日からできる!技術的負債の返済を加速するための実践ガイド~『ホットペッパービューティー』の事例をもとに~
recruitengineers
PRO
3
380
スタートアップ1人目QAエンジニアが QAチームを立ち上げ、“個”からチーム、 そして“組織”に成長するまで / How to set up QA team at reiwatravel
mii3king
2
1.4k
AndroidXR 開発ツールごとの できることできないこと
donabe3
0
130
Oracle Base Database Service 技術詳細
oracle4engineer
PRO
6
57k
RECRUIT TECH CONFERENCE 2025 プレイベント【高橋】
recruitengineers
PRO
0
150
次世代KYC活動報告 / 20250219-BizDay17-KYC-nextgen
oidfj
0
250
TAMとre:Capセキュリティ編 〜拡張脅威検出デモを添えて〜
fujiihda
2
230
株式会社EventHub・エンジニア採用資料
eventhub
0
4.3k
Swiftの “private” を テストする / Testing Swift "private"
yutailang0119
0
130
自動テストの世界に、この5年間で起きたこと
autifyhq
10
8.4k
君も受託系GISエンジニアにならないか
sudataka
2
430
Featured
See All Featured
Designing for humans not robots
tammielis
250
25k
Practical Orchestrator
shlominoach
186
10k
Fashionably flexible responsive web design (full day workshop)
malarkey
406
66k
Imperfection Machines: The Place of Print at Facebook
scottboms
267
13k
BBQ
matthewcrist
87
9.5k
Principles of Awesome APIs and How to Build Them.
keavy
126
17k
Facilitating Awesome Meetings
lara
52
6.2k
The Pragmatic Product Professional
lauravandoore
32
6.4k
Optimizing for Happiness
mojombo
376
70k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
193
16k
Raft: Consensus for Rubyists
vanstee
137
6.8k
Navigating Team Friction
lara
183
15k
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
の前提知識はかなり必要なのでひたすらキャッチアップをしていく 必要があってそれが大変
ご清聴ありがとうございました