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 入門
Search
Shigeki Yamato (Mori)
March 23, 2018
Technology
0
260
React Native 入門
React Native のはじめ方
Shigeki Yamato (Mori)
March 23, 2018
Tweet
Share
More Decks by Shigeki Yamato (Mori)
See All by Shigeki Yamato (Mori)
DroidKaigi 2019 面白かったセッション
heki1224
1
51
Android Architecture Blueprints で学ぶ標準的なアプリの作り方
heki1224
1
750
What's new in Android O ? / Android Go
heki1224
0
160
健康と幸せ - Health and Happiness
heki1224
0
92
スマートフォンSDK開発者座談会#1
heki1224
0
76
SDK開発で話したい事
heki1224
0
74
Firebase Authentication
heki1224
0
550
新海誠作品の物語構造
heki1224
0
500
広告SDKの話
heki1224
1
520
Other Decks in Technology
See All in Technology
目の前の仕事と向き合うことで成長できる - 仕事とスキルを広げる / Every little bit counts
soudai
22
5.8k
技術負債の「予兆検知」と「状況異変」のススメ / Technology Dept
i35_267
1
1k
第13回 Data-Centric AI勉強会, 画像認識におけるData-centric AI
ksaito_osx
0
360
20250208_OpenAIDeepResearchがやばいという話
doradora09
PRO
0
170
Moved to https://speakerdeck.com/toshihue/presales-engineer-career-bridging-tech-biz-ja
toshihue
2
550
事業継続を支える自動テストの考え方
tsuemura
0
300
PL900試験から学ぶ Power Platform 基礎知識講座
kumikeyy
0
110
地方拠点で エンジニアリングマネージャーってできるの? 〜地方という制約を楽しむオーナーシップとコミュニティ作り〜
1coin
1
130
All you need to know about InnoDB Primary Keys
lefred
0
120
依存関係があるコンポーネントは Barrel ファイルでまとめよう
azukiazusa1
3
530
5分で紹介する生成AIエージェントとAmazon Bedrock Agents / 5-minutes introduction to generative AI agents and Amazon Bedrock Agents
hideakiaoyagi
0
220
Larkご案内資料
customercloud
PRO
0
600
Featured
See All Featured
Code Reviewing Like a Champion
maltzj
521
39k
[RailsConf 2023] Rails as a piece of cake
palkan
53
5.2k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
33
2.1k
Why You Should Never Use an ORM
jnunemaker
PRO
55
9.2k
The Web Performance Landscape in 2024 [PerfNow 2024]
tammyeverts
4
400
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
44
9.4k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
6
540
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
12
950
Scaling GitHub
holman
459
140k
Fantastic passwords and where to find them - at NoRuKo
philnash
51
3k
Fashionably flexible responsive web design (full day workshop)
malarkey
406
66k
Making Projects Easy
brettharned
116
6k
Transcript
React Native 入門 オウチーノ技術部定例LT 2018.03.23 山戸茂樹 1
目次 • React Native とは • はじめ方 • 開発環境 •
UIライブラリ • ルーティング(画面遷移) • 環境変数 • アプリへのコンバート 2
React Native とは • React.js を使ってモバイルアプリ(iOS, Android) を作成出来る JavaScript フ
レームワーク • クロスプラットフォームでネイティブアプリを開発出来るうれしさ • 有名アプリへの導入実績(Facebook, Instagram, Airbnb) • ライフサイクルが React.js と一緒 (みたいになるように裏で動かしてる) 3
React Native とは • まだまだ発展途上 • ドキュメントが弱い • ライブラリが(React.jsほど) ない
• デバイス固有の操作(カメラ、GPS、センサー系)に弱い(作り込みましょう) • クロスプラットフォームとは言っても、iOSだけAndroidだけの機能は普通にある (特にAndroid向けが少ない印象) 4
はじめ方 • create-react-native-app (CRNA) を使ってテンプレートを作る ◦ すぐに書き始められる ◦ アプリをエクスポートする場合に注意が必要 5
開発環境 • expo を使って作りながら動作確認をする環境を作る(CRNA標準) ◦ iOS, Android でそれぞれ Expo アプリをインストール
◦ Expo アプリでQRコードを読み取る(同一ネットワーク内) ◦ 動作確認がすぐに出来る ◦ ファイル保存後、即反映 6
UIライブラリ • React Native 自体でもUIの差異は吸収してくれる • NativeBase を使うとより簡単にUI部品を配置できる ◦ カスタマイズは要確認
7
ルーティング • アプリの画面遷移は少し特殊 ◦ スタック ◦ ナビゲーションドロワー • React Navigation
が公式におすすめされている 8
環境変数 • 開発環境と本番環境で環境変数を切り替えたい場合 ◦ env.js で __DEV__ の true/false をチェック
◦ iOS, Android それぞれで使える 9
アプリへのコンバート • アプリの実ファイルを出力するには eject が必要 ◦ リリース時には eject してから、ファイルを作るのがよさそう ◦
一度 eject すると元に戻りません!!(要注意) 10
まとめ • おすすめする方 ◦ とりあえずクロスプラットフォームでアプリを作りたい ◦ 複雑な要件はない ◦ デバイスもそんなに使わない ◦
React.js 書ける 11
参考文献 ReactNativeの話 https://facebook.github.io/react-native/ https://github.com/react-community/create-react-native-app https://expo.io/ https://nativebase.io/ https://reactnavigation.org/ https://www.manning.com/books/react-native-in-action 12
参考文献 プロジェクト変換の話 http://itexplorer.hateblo.jp/entry/20170904-create-react-native-app-eject https://github.com/react-community/create-react-native-app/blob/master/EJE CTING.md 13
参考文献 アプリ署名の話 https://support.google.com/googleplay/android-developer/answer/7384423?h l=ja https://facebook.github.io/react-native/docs/signed-apk-android.html 14