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
270
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
60
Android Architecture Blueprints で学ぶ標準的なアプリの作り方
heki1224
1
790
What's new in Android O ? / Android Go
heki1224
0
160
健康と幸せ - Health and Happiness
heki1224
0
100
スマートフォンSDK開発者座談会#1
heki1224
0
85
SDK開発で話したい事
heki1224
0
84
Firebase Authentication
heki1224
0
580
新海誠作品の物語構造
heki1224
0
530
広告SDKの話
heki1224
1
530
Other Decks in Technology
See All in Technology
Rustから学ぶ 非同期処理の仕組み
skanehira
1
140
AI開発ツールCreateがAnythingになったよ
tendasato
0
130
2つのフロントエンドと状態管理
mixi_engineers
PRO
3
110
AI時代を生き抜くエンジニアキャリアの築き方 (AI-Native 時代、エンジニアという道は 「最大の挑戦の場」となる) / Building an Engineering Career to Thrive in the Age of AI (In the AI-Native Era, the Path of Engineering Becomes the Ultimate Arena of Challenge)
jeongjaesoon
0
160
Practical Agentic AI in Software Engineering
uzyn
0
110
大「個人開発サービス」時代に僕たちはどう生きるか
sotarok
20
10k
エラーとアクセシビリティ
schktjm
1
1.3k
職種の壁を溶かして開発サイクルを高速に回す~情報透明性と職種越境から考えるAIフレンドリーな職種間連携~
daitasu
0
170
RSCの時代にReactとフレームワークの境界を探る
uhyo
10
3.4k
サラリーマンの小遣いで作るtoCサービス - Cloudflare Workersでスケールする開発戦略
shinaps
2
450
下手な強制、ダメ!絶対! 「ガードレール」を「檻」にさせない"ガバナンス"の取り方とは?
tsukaman
2
450
Modern Linux
oracle4engineer
PRO
0
100
Featured
See All Featured
Mobile First: as difficult as doing things right
swwweet
224
9.9k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
34
6k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
8
920
The Invisible Side of Design
smashingmag
301
51k
Designing Experiences People Love
moore
142
24k
The Straight Up "How To Draw Better" Workshop
denniskardys
236
140k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
33
2.4k
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
eileencodes
26
3k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
PRO
188
55k
Git: the NoSQL Database
bkeepers
PRO
431
66k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
333
22k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
248
1.3M
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