Soumettre la recherche
Mettre en ligne
React Nativeはクロスプラットフォームモバイルアプリ開発の夢を見るか #DroidKaigi
•
56 j'aime
•
25,111 vues
Yukiya Nakagawa
Suivre
DroidKaigi 2017の講演資料です
Lire moins
Lire la suite
Technologie
Signaler
Partager
Signaler
Partager
1 sur 118
Recommandé
少し幸せになる技術
少し幸せになる技術
kamedon39
React Native Androidはなぜ動くのか
React Native Androidはなぜ動くのか
Yukiya Nakagawa
Philip Shurpik "Architecting React Native app"
Philip Shurpik "Architecting React Native app"
Fwdays
A tour of React Native
A tour of React Native
Tadeu Zagallo
A Closer Look At React Native
A Closer Look At React Native
Ian Wang
React Nativeアプリをリリースし続けるために、最初に行う8つの取り組み
React Nativeアプリをリリースし続けるために、最初に行う8つの取り組み
Yukiya Nakagawa
アプリエンジニアがReactNativeに乗り換えたら
アプリエンジニアがReactNativeに乗り換えたら
kzm hr
Get Hip with JHipster: Spring Boot + AngularJS + Bootstrap - DOSUG February 2016
Get Hip with JHipster: Spring Boot + AngularJS + Bootstrap - DOSUG February 2016
Matt Raible
Contenu connexe
Tendances
Get Hip with JHipster: Spring Boot + AngularJS + Bootstrap - GeekOut 2016
Get Hip with JHipster: Spring Boot + AngularJS + Bootstrap - GeekOut 2016
Matt Raible
Angular js vs. Facebook react
Angular js vs. Facebook react
Keyup
Using JHipster for generating Angular/Spring Boot apps
Using JHipster for generating Angular/Spring Boot apps
Yakov Fain
Angular 2 Migration - JHipster Meetup 6
Angular 2 Migration - JHipster Meetup 6
William Marques
JHipster
JHipster
Yuen-Kuei Hsueh
Creating books app with react native
Creating books app with react native
Ali Sa'o
Using React with Grails 3
Using React with Grails 3
Zachary Klein
Optimizing React Native views for pre-animation
Optimizing React Native views for pre-animation
ModusJesus
React Native for ReactJS Devs
React Native for ReactJS Devs
Barak Cohen
Get Hip with JHipster: Spring Boot + AngularJS + Bootstrap - Devoxx 2015
Get Hip with JHipster: Spring Boot + AngularJS + Bootstrap - Devoxx 2015
Matt Raible
Front End Development for Back End Developers - UberConf 2017
Front End Development for Back End Developers - UberConf 2017
Matt Raible
Using ReactJS in AngularJS
Using ReactJS in AngularJS
Boris Dinkevich
JHipster, modern web application development made easy
JHipster, modern web application development made easy
Raphaël Brugier
Bootiful Development with Spring Boot and Angular - Spring I/O 2017
Bootiful Development with Spring Boot and Angular - Spring I/O 2017
Matt Raible
Get Hip with Java Hipster - JavaOne 2017
Get Hip with Java Hipster - JavaOne 2017
Matt Raible
What's New in JHipsterLand - Devoxx Poland 2017
What's New in JHipsterLand - Devoxx Poland 2017
Matt Raible
Front End Development for Back End Developers - Devoxx UK 2017
Front End Development for Back End Developers - Devoxx UK 2017
Matt Raible
React Native
React Native
Huqiu Liao
Григорий Шехет "Treasure hunt in the land of Reactive frameworks"
Григорий Шехет "Treasure hunt in the land of Reactive frameworks"
Fwdays
Developing PWAs and Mobile Apps with Ionic, Angular, and JHipster - Devoxx Mo...
Developing PWAs and Mobile Apps with Ionic, Angular, and JHipster - Devoxx Mo...
Matt Raible
Tendances
(20)
Get Hip with JHipster: Spring Boot + AngularJS + Bootstrap - GeekOut 2016
Get Hip with JHipster: Spring Boot + AngularJS + Bootstrap - GeekOut 2016
Angular js vs. Facebook react
Angular js vs. Facebook react
Using JHipster for generating Angular/Spring Boot apps
Using JHipster for generating Angular/Spring Boot apps
Angular 2 Migration - JHipster Meetup 6
Angular 2 Migration - JHipster Meetup 6
JHipster
JHipster
Creating books app with react native
Creating books app with react native
Using React with Grails 3
Using React with Grails 3
Optimizing React Native views for pre-animation
Optimizing React Native views for pre-animation
React Native for ReactJS Devs
React Native for ReactJS Devs
Get Hip with JHipster: Spring Boot + AngularJS + Bootstrap - Devoxx 2015
Get Hip with JHipster: Spring Boot + AngularJS + Bootstrap - Devoxx 2015
Front End Development for Back End Developers - UberConf 2017
Front End Development for Back End Developers - UberConf 2017
Using ReactJS in AngularJS
Using ReactJS in AngularJS
JHipster, modern web application development made easy
JHipster, modern web application development made easy
Bootiful Development with Spring Boot and Angular - Spring I/O 2017
Bootiful Development with Spring Boot and Angular - Spring I/O 2017
Get Hip with Java Hipster - JavaOne 2017
Get Hip with Java Hipster - JavaOne 2017
What's New in JHipsterLand - Devoxx Poland 2017
What's New in JHipsterLand - Devoxx Poland 2017
Front End Development for Back End Developers - Devoxx UK 2017
Front End Development for Back End Developers - Devoxx UK 2017
React Native
React Native
Григорий Шехет "Treasure hunt in the land of Reactive frameworks"
Григорий Шехет "Treasure hunt in the land of Reactive frameworks"
Developing PWAs and Mobile Apps with Ionic, Angular, and JHipster - Devoxx Mo...
Developing PWAs and Mobile Apps with Ionic, Angular, and JHipster - Devoxx Mo...
Similaire à React Nativeはクロスプラットフォームモバイルアプリ開発の夢を見るか #DroidKaigi
React Nativeの光と闇
React Nativeの光と闇
Yukiya Nakagawa
React native by example by Vadim Ruban
React native by example by Vadim Ruban
Lohika_Odessa_TechTalks
React Native for multi-platform mobile applications
React Native for multi-platform mobile applications
Matteo Manchi
Workshop 26: React Native - The Native Side
Workshop 26: React Native - The Native Side
Visual Engineering
Hybrid App using WordPress
Hybrid App using WordPress
Haim Michael
Building cross-platform mobile apps with React Native (Jfokus 2017)
Building cross-platform mobile apps with React Native (Jfokus 2017)
Maarten Mulders
Micro Front-Ends
Micro Front-Ends
Ori Calvo
Modern JavaScript, without giving up on Rails
Modern JavaScript, without giving up on Rails
Jonathan Johnson
Universal JavaScript Web Applications with React - Luciano Mammino - Codemoti...
Universal JavaScript Web Applications with React - Luciano Mammino - Codemoti...
Codemotion
Universal JS Web Applications with React - Luciano Mammino - Codemotion Rome ...
Universal JS Web Applications with React - Luciano Mammino - Codemotion Rome ...
Luciano Mammino
Android development
Android development
Gregoire BARRET
React && React Native workshop
React && React Native workshop
Stacy Goh
How to React Native
How to React Native
Dmitry Ulyanov
20150516 modern web_conf_tw
20150516 modern web_conf_tw
Tse-Ching Ho
125 고성능 web view-deview 2013 발표 자료_공유용
125 고성능 web view-deview 2013 발표 자료_공유용
NAVER D2
React Native
React Native
Craig Jolicoeur
Building Universal Web Apps with React ForwardJS 2017
Building Universal Web Apps with React ForwardJS 2017
Elyse Kolker Gordon
React Native
React Native
Heber Silva
JSAnkara Swift v React Native
JSAnkara Swift v React Native
Muhammed Demirci
GDSC NITS Presents Kickstart into ReactJS
GDSC NITS Presents Kickstart into ReactJS
Pratik Majumdar
Similaire à React Nativeはクロスプラットフォームモバイルアプリ開発の夢を見るか #DroidKaigi
(20)
React Nativeの光と闇
React Nativeの光と闇
React native by example by Vadim Ruban
React native by example by Vadim Ruban
React Native for multi-platform mobile applications
React Native for multi-platform mobile applications
Workshop 26: React Native - The Native Side
Workshop 26: React Native - The Native Side
Hybrid App using WordPress
Hybrid App using WordPress
Building cross-platform mobile apps with React Native (Jfokus 2017)
Building cross-platform mobile apps with React Native (Jfokus 2017)
Micro Front-Ends
Micro Front-Ends
Modern JavaScript, without giving up on Rails
Modern JavaScript, without giving up on Rails
Universal JavaScript Web Applications with React - Luciano Mammino - Codemoti...
Universal JavaScript Web Applications with React - Luciano Mammino - Codemoti...
Universal JS Web Applications with React - Luciano Mammino - Codemotion Rome ...
Universal JS Web Applications with React - Luciano Mammino - Codemotion Rome ...
Android development
Android development
React && React Native workshop
React && React Native workshop
How to React Native
How to React Native
20150516 modern web_conf_tw
20150516 modern web_conf_tw
125 고성능 web view-deview 2013 발표 자료_공유용
125 고성능 web view-deview 2013 발표 자료_공유용
React Native
React Native
Building Universal Web Apps with React ForwardJS 2017
Building Universal Web Apps with React ForwardJS 2017
React Native
React Native
JSAnkara Swift v React Native
JSAnkara Swift v React Native
GDSC NITS Presents Kickstart into ReactJS
GDSC NITS Presents Kickstart into ReactJS
Plus de Yukiya Nakagawa
Atomic Designは「マルチ」で真価を発揮する
Atomic Designは「マルチ」で真価を発揮する
Yukiya Nakagawa
Androidの入門書を書いたときに気にしたこと #NDS57
Androidの入門書を書いたときに気にしたこと #NDS57
Yukiya Nakagawa
アグリノートにおけるGIS情報を活かした圃場・作付管理の取り組み @ FOSS4GJ
アグリノートにおけるGIS情報を活かした圃場・作付管理の取り組み @ FOSS4GJ
Yukiya Nakagawa
CSS in JSの話 #friday13json
CSS in JSの話 #friday13json
Yukiya Nakagawa
AndroidLint #DroidKaigi
AndroidLint #DroidKaigi
Yukiya Nakagawa
Android Lintを覚えてベテラン開発者に追いつこう #ndsmeetup
Android Lintを覚えてベテラン開発者に追いつこう #ndsmeetup
Yukiya Nakagawa
僕らのデータ同期プラクティス
僕らのデータ同期プラクティス
Yukiya Nakagawa
Android再入門 〜Eclipseのことは忘れろ〜
Android再入門 〜Eclipseのことは忘れろ〜
Yukiya Nakagawa
もう一度Kotlinの話をしよう #ndsmeetup4
もう一度Kotlinの話をしよう #ndsmeetup4
Yukiya Nakagawa
アグリノートを支える技術
アグリノートを支える技術
Yukiya Nakagawa
NDS36 Kotlin Cute
NDS36 Kotlin Cute
Yukiya Nakagawa
NDS36 Java7&Java8
NDS36 Java7&Java8
Yukiya Nakagawa
Coworking Business Forum in NIIGATA 2013
Coworking Business Forum in NIIGATA 2013
Yukiya Nakagawa
Niigata.rb#03
Niigata.rb#03
Yukiya Nakagawa
PechaKucha Niigata #3 2013.7.27
PechaKucha Niigata #3 2013.7.27
Yukiya Nakagawa
ぼくのかんがえたふつうのあんどろいどかいはつ
ぼくのかんがえたふつうのあんどろいどかいはつ
Yukiya Nakagawa
Androidで使えるJSON-Javaライブラリ
Androidで使えるJSON-Javaライブラリ
Yukiya Nakagawa
NFCLAB会津
NFCLAB会津
Yukiya Nakagawa
ぼくらの錬金術〜キメラの作り方〜
ぼくらの錬金術〜キメラの作り方〜
Yukiya Nakagawa
Action Bar Compat読んでみた
Action Bar Compat読んでみた
Yukiya Nakagawa
Plus de Yukiya Nakagawa
(20)
Atomic Designは「マルチ」で真価を発揮する
Atomic Designは「マルチ」で真価を発揮する
Androidの入門書を書いたときに気にしたこと #NDS57
Androidの入門書を書いたときに気にしたこと #NDS57
アグリノートにおけるGIS情報を活かした圃場・作付管理の取り組み @ FOSS4GJ
アグリノートにおけるGIS情報を活かした圃場・作付管理の取り組み @ FOSS4GJ
CSS in JSの話 #friday13json
CSS in JSの話 #friday13json
AndroidLint #DroidKaigi
AndroidLint #DroidKaigi
Android Lintを覚えてベテラン開発者に追いつこう #ndsmeetup
Android Lintを覚えてベテラン開発者に追いつこう #ndsmeetup
僕らのデータ同期プラクティス
僕らのデータ同期プラクティス
Android再入門 〜Eclipseのことは忘れろ〜
Android再入門 〜Eclipseのことは忘れろ〜
もう一度Kotlinの話をしよう #ndsmeetup4
もう一度Kotlinの話をしよう #ndsmeetup4
アグリノートを支える技術
アグリノートを支える技術
NDS36 Kotlin Cute
NDS36 Kotlin Cute
NDS36 Java7&Java8
NDS36 Java7&Java8
Coworking Business Forum in NIIGATA 2013
Coworking Business Forum in NIIGATA 2013
Niigata.rb#03
Niigata.rb#03
PechaKucha Niigata #3 2013.7.27
PechaKucha Niigata #3 2013.7.27
ぼくのかんがえたふつうのあんどろいどかいはつ
ぼくのかんがえたふつうのあんどろいどかいはつ
Androidで使えるJSON-Javaライブラリ
Androidで使えるJSON-Javaライブラリ
NFCLAB会津
NFCLAB会津
ぼくらの錬金術〜キメラの作り方〜
ぼくらの錬金術〜キメラの作り方〜
Action Bar Compat読んでみた
Action Bar Compat読んでみた
Dernier
LF Energy Webinar - Unveiling OpenEEMeter 4.0
LF Energy Webinar - Unveiling OpenEEMeter 4.0
DanBrown980551
From the origin to the future of Open Source model and business
From the origin to the future of Open Source model and business
Francesco Corti
Introduction to RAG (Retrieval Augmented Generation) and its application
Introduction to RAG (Retrieval Augmented Generation) and its application
Knoldus Inc.
3 Pitfalls Everyone Should Avoid with Cloud Data
3 Pitfalls Everyone Should Avoid with Cloud Data
Eric D. Schabell
Design and Modeling for MySQL SCALE 21X Pasadena, CA Mar 2024
Design and Modeling for MySQL SCALE 21X Pasadena, CA Mar 2024
Alkin Tezuysal
Emil Eifrem at GraphSummit Copenhagen 2024 - The Art of the Possible.pptx
Emil Eifrem at GraphSummit Copenhagen 2024 - The Art of the Possible.pptx
Neo4j
Key Trends Shaping the Future of Infrastructure.pdf
Key Trends Shaping the Future of Infrastructure.pdf
Cheryl Hung
Explore the UiPath Community and ways you can benefit on your journey to auto...
Explore the UiPath Community and ways you can benefit on your journey to auto...
DianaGray10
UiPath Studio Web workshop Series - Day 3
UiPath Studio Web workshop Series - Day 3
DianaGray10
Scenario Library et REX Discover industry- and role- based scenarios
Scenario Library et REX Discover industry- and role- based scenarios
Erol GIRAUDY
.NET 8 ChatBot with Azure OpenAI Services.pptx
.NET 8 ChatBot with Azure OpenAI Services.pptx
Hansamali Gamage
How to release an Open Source Dataweave Library
How to release an Open Source Dataweave Library
shyamraj55
EMEA What is ThousandEyes? Webinar
EMEA What is ThousandEyes? Webinar
ThousandEyes
The Zero-ETL Approach: Enhancing Data Agility and Insight
The Zero-ETL Approach: Enhancing Data Agility and Insight
Safe Software
Q4 2023 Quarterly Investor Presentation - FINAL - v1.pdf
Q4 2023 Quarterly Investor Presentation - FINAL - v1.pdf
Tejal81
Where developers are challenged, what developers want and where DevEx is going
Where developers are challenged, what developers want and where DevEx is going
Francesco Corti
Flow Control | Block Size | ST Min | First Frame
Flow Control | Block Size | ST Min | First Frame
Kapil Thakar
Trailblazer Community - Flows Workshop (Session 2)
Trailblazer Community - Flows Workshop (Session 2)
Muhammad Tiham Siddiqui
Keep Your Finger on the Pulse of Your Building's Performance with IES Live
Keep Your Finger on the Pulse of Your Building's Performance with IES Live
IES VE
My key hands-on projects in Quantum, and QAI
My key hands-on projects in Quantum, and QAI
Vijayananda Mohire
Dernier
(20)
LF Energy Webinar - Unveiling OpenEEMeter 4.0
LF Energy Webinar - Unveiling OpenEEMeter 4.0
From the origin to the future of Open Source model and business
From the origin to the future of Open Source model and business
Introduction to RAG (Retrieval Augmented Generation) and its application
Introduction to RAG (Retrieval Augmented Generation) and its application
3 Pitfalls Everyone Should Avoid with Cloud Data
3 Pitfalls Everyone Should Avoid with Cloud Data
Design and Modeling for MySQL SCALE 21X Pasadena, CA Mar 2024
Design and Modeling for MySQL SCALE 21X Pasadena, CA Mar 2024
Emil Eifrem at GraphSummit Copenhagen 2024 - The Art of the Possible.pptx
Emil Eifrem at GraphSummit Copenhagen 2024 - The Art of the Possible.pptx
Key Trends Shaping the Future of Infrastructure.pdf
Key Trends Shaping the Future of Infrastructure.pdf
Explore the UiPath Community and ways you can benefit on your journey to auto...
Explore the UiPath Community and ways you can benefit on your journey to auto...
UiPath Studio Web workshop Series - Day 3
UiPath Studio Web workshop Series - Day 3
Scenario Library et REX Discover industry- and role- based scenarios
Scenario Library et REX Discover industry- and role- based scenarios
.NET 8 ChatBot with Azure OpenAI Services.pptx
.NET 8 ChatBot with Azure OpenAI Services.pptx
How to release an Open Source Dataweave Library
How to release an Open Source Dataweave Library
EMEA What is ThousandEyes? Webinar
EMEA What is ThousandEyes? Webinar
The Zero-ETL Approach: Enhancing Data Agility and Insight
The Zero-ETL Approach: Enhancing Data Agility and Insight
Q4 2023 Quarterly Investor Presentation - FINAL - v1.pdf
Q4 2023 Quarterly Investor Presentation - FINAL - v1.pdf
Where developers are challenged, what developers want and where DevEx is going
Where developers are challenged, what developers want and where DevEx is going
Flow Control | Block Size | ST Min | First Frame
Flow Control | Block Size | ST Min | First Frame
Trailblazer Community - Flows Workshop (Session 2)
Trailblazer Community - Flows Workshop (Session 2)
Keep Your Finger on the Pulse of Your Building's Performance with IES Live
Keep Your Finger on the Pulse of Your Building's Performance with IES Live
My key hands-on projects in Quantum, and QAI
My key hands-on projects in Quantum, and QAI
React Nativeはクロスプラットフォームモバイルアプリ開発の夢を見るか #DroidKaigi
1.
React Native 2017.3.9 DroidKaigi
2017 Yukiya Nakagawa / @Nkzn ROOM 3 17:10-17:40 #droidkaigi3
2.
Who are you? •
Yukiya Nakagawa / @Nkzn • @ • • • Android 2009
3.
React Native
4.
• • Hello World •
Production
5.
Target • Android /
iOS • React React Native • React Native
6.
Agenda • ‣ ‣ React ‣ React
Native • ‣ React Native ‣ ‣
7.
• React • React
Native • React Native Before / After
8.
• React (DOM) •
ES201x • NPM • React Native
10.
Biz
11.
Biz • Android iOS • • •
12.
https://www.kantarworldpanel.com/global/smartphone-os-market-share/
13.
• • • iOS Android
14.
1
15.
Android iOS OS UI WebView Cordova
Xamarin Unity
16.
React
17.
React https://facebook.github.io/react/
18.
• • JSX • Reactive
19.
JSX
20.
<div> <Header /> <LeftPane /> <RightPane
/> </div>
22.
React
23.
import React from
'react'; import ReactDOM from 'react-dom'; const styles = { container: {display: 'flex', flexDirection: ‘row', …} }; class App extends React.Component { render() { const myName = /* props or state */; return ( <div style={styles.container}> <Header /> <LeftPane /> <RightPane name={myName} /> </div> ); } } ReactDOM.render( <App />, document.getElementById('app') );
24.
Virtual DOM
26.
React DOM
27.
React DOM
28.
React DOM
29.
React DOM
30.
https://tylermcginnis.com/an-introduction-to-life-cycle-events-in-react-js/
31.
https://developer.android.com/reference/android/app/Activity.html
32.
React is • Facebook
JS • https://facebook.github.io/react/ • • • View View View
33.
React Native (Side React)
35.
Android View
36.
Android <?xml version="1.0" encoding="utf-8"?> <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent"
> <include layout="@layout/header" /> <include layout="@layout/left_pane" /> <include layout="@layout/right_pane" /> </RelativeLayout>
37.
Android View <include layout= “@layout/header”/> android.view.View <include
layout= “@layout/left_pane”/> <include layout= “@layout/right_pane”/>
39.
• Fragment • • Advocating
Against Android Fragments • https://medium.com/square-corner-blog/advocating-against- android-fragments-81fd0b462c97 • ( ) http://ninjinkun.hatenablog.com/entry/ 2014/10/16/234611
40.
Android View
42.
View DOM
43.
Android View
44.
View DOM
45.
React is • Facebook
JS • https://facebook.github.io/react/ • • • View View View
46.
React DOM
47.
import React from
'react'; import ReactDOM from 'react-dom'; const styles = { container: {display: 'flex', flexDirection: ‘row', …} }; class App extends React.Component { render() { const myName = /* props or state */; return ( <div style={styles.container}> <Header /> <LeftPane /> <RightPane name={myName} /> </div> ); } } ReactDOM.render( <App />, document.getElementById('app') ); import ReactDOM from 'react-dom'; div div ReactDOM.render( <App />, document.getElementById('app') );
48.
import React from
"react"; import { View, AppRegistry } from "react-native"; const styles = { container: {display: 'flex', flexDirection: ‘row', …} }; class App extends React.Component { render() { const myName = /* props or state */; return ( <View style={styles.container}> <Header /> <LeftPane /> <RightPane name={myName} /> </View> ); } } AppRegistry.registerComponent( "App", () => App );
49.
React ReactDOM
50.
React UI React Native
51.
React Native (Side Android)
52.
Android iOS OS UI
53.
React Native Android iOS OS UI
54.
React Native Android (Side
UI Component)
55.
ReactRootView • FrameLayout • onMeasure
JavaScriptCore JS JS
56.
ReactRootView RootView (ReactActivityDelegate.java) protected ReactRootView
createRootView() { return new ReactRootView(getContext()); } // protected void onCreate(Bundle savedInstanceState) { // if (mMainComponentName != null && !needsOverlayPermission) { loadApp(mMainComponentName); } // } protected void loadApp(String appKey) { if (mReactRootView != null) { throw new IllegalStateException("Cannot loadApp while app is already running."); } mReactRootView = createRootView(); mReactRootView.startReactApplication( getReactNativeHost().getReactInstanceManager(), appKey, getLaunchOptions()); getPlainActivity().setContentView(mReactRootView); } https://github.com/facebook/react-native/blob/d21aa9248056b08449f4a0f57e824b3c52b0614b/ReactAndroid/src/main/java/com/facebook/react/ReactActivityDelegate.java#L67-L115
57.
Activity ReactRootView JS
58.
View
59.
View <View style={styles.container}> <Text style={styles.welcome}> Welcome
to React Native! </Text> <Text style={styles.instructions1}> To get started, edit index.android.js </Text> <Text style={styles.instructions2}> Shake or press menu button for dev menu </Text> </View>
60.
react.gradle JS : import JS $buildDir/intermediates/ assets/index.android.bundle JS
61.
React Native Android (Side
Native Module)
62.
JS UI
63.
(Web API) https://developer.mozilla.org/ja/docs/Web/Reference/API
64.
/Libraries/Core/Timers/JSTimers.js /ReactAndroid/src/main/java/com/facebook/react/modules/core/Timing.java (※ )
65.
Polyfill https://facebook.github.io/react-native/docs/javascript-environment.html
66.
• React View •
API JS • UI ReactRootView UI
67.
React Native Android iOS OS UI
69.
http://facebook.github.io/react-native/showcase.html
70.
https://design.google.com/articles/airbnb/
71.
React Native
72.
Biz • Android iOS • • •
73.
Facebook JA
74.
• iOS Cordova
+ React Web • 1 iOS/Android • React •
75.
React Native
77.
UI
78.
CSS • CSS
79.
const styles =
StyleSheet.create({ container: { paddingTop: metrics.x4, paddingBottom: metrics.x2 }, logo: { height: 180, alignSelf: "center" }, loginBox: { marginTop: metrics.x4, marginHorizontal: metrics.x4 } });
80.
<View style={styles.container}> … </View>
81.
CSS • CSS • CSS •
Bootstrap Material Design Lite • CSS React • OnsenUI material-ui
82.
Android, iOS
85.
Material Design const metrics
= { x0_25: 2, x0_5: 4, x0_75: 6, x1: 8, x1_5: 12, x2: 16, x2_5: 20, x3: 24, x4: 32, x5: 40, x6: 48, x7: 56, x8: 64, x9: 72 }; export default metrics; metrics.android.js const metrics = { x0_25: 2, x0_5: 4, x0_75: 6, x1: 8, x1_5: 11, x2: 15, x2_5: 20, x3: 22, x4: 32, x5: 40, x6: 44, x7: 56, x8: 64, x9: 72 }; export default metrics; metrics.ios.js
86.
• <Image> • • Android
Picasso PhotoView • iOS UIScrollView JS http://square.github.io/picasso/ https://github.com/chrisbanes/PhotoView
89.
React Native HelloWorld
90.
JS • API • lodash
91.
• API React Native • •
API orz
92.
• VSCode JS •
Android/iOS Android iOS • JS R Live Reload • Android Studio Xcode
93.
VSCode Android Studio Xcode Android iOS Live Reload
94.
• JS localhost •
96.
• Initial commit:
2 22 • v1.0.0 : 5 11
97.
2
98.
CI • • Android Java,
Android SDK • iOS OS X, Xcode, iOS SDK • Fastlane CocoaPods Ruby • mac mini
99.
React Native
100.
+ React
101.
• Web View React •
Learn Once, Write Anywhere
102.
• React Native • React
Native • Breaking Change
103.
Breaking Change
107.
• React Native • React
Native • Breaking Change
109.
• • • v2 2
110.
React Native
111.
React Native
112.
React Native
113.
• WebView React •
UI Native Component/Module • Android Java,
114.
React Native
116.
React Android
117.
!