Enviar búsqueda
Cargar
React Nativeはクロスプラットフォームモバイルアプリ開発の夢を見るか #DroidKaigi
•
56 recomendaciones
•
25,117 vistas
Yukiya Nakagawa
Seguir
DroidKaigi 2017の講演資料です
Leer menos
Leer más
Tecnología
Denunciar
Compartir
Denunciar
Compartir
1 de 118
Recomendados
少し幸せになる技術
少し幸せになる技術
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
Recomendados
少し幸せになる技術
少し幸せになる技術
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
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
React Nativeの光と闇
React Nativeの光と闇
Yukiya Nakagawa
React native by example by Vadim Ruban
React native by example by Vadim Ruban
Lohika_Odessa_TechTalks
Más contenido relacionado
La actualidad más candente
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
La actualidad más candente
(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...
Similar a 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 JS Web Applications with React - Luciano Mammino - Codemotion Rome ...
Universal JS Web Applications with React - Luciano Mammino - Codemotion Rome ...
Luciano Mammino
Universal JavaScript Web Applications with React - Luciano Mammino - Codemoti...
Universal JavaScript Web Applications with React - Luciano Mammino - Codemoti...
Codemotion
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
How To Integrate Native Android App With React Native.
How To Integrate Native Android App With React Native.
Techugo
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
Similar a 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 JS Web Applications with React - Luciano Mammino - Codemotion Rome ...
Universal JS Web Applications with React - Luciano Mammino - Codemotion Rome ...
Universal JavaScript Web Applications with React - Luciano Mammino - Codemoti...
Universal JavaScript Web Applications with React - Luciano Mammino - Codemoti...
Android development
Android development
React && React Native workshop
React && React Native workshop
How to React Native
How to React Native
How To Integrate Native Android App With React Native.
How To Integrate Native Android App With 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
Más 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
Más 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読んでみた
Último
Data governance with Unity Catalog Presentation
Data governance with Unity Catalog Presentation
Knoldus Inc.
The Fit for Passkeys for Employee and Consumer Sign-ins: FIDO Paris Seminar.pptx
The Fit for Passkeys for Employee and Consumer Sign-ins: FIDO Paris Seminar.pptx
LoriGlavin3
A Journey Into the Emotions of Software Developers
A Journey Into the Emotions of Software Developers
Nicole Novielli
Take control of your SAP testing with UiPath Test Suite
Take control of your SAP testing with UiPath Test Suite
DianaGray10
Moving Beyond Passwords: FIDO Paris Seminar.pdf
Moving Beyond Passwords: FIDO Paris Seminar.pdf
LoriGlavin3
Emixa Mendix Meetup 11 April 2024 about Mendix Native development
Emixa Mendix Meetup 11 April 2024 about Mendix Native development
Pim van der Noll
What is DBT - The Ultimate Data Build Tool.pdf
What is DBT - The Ultimate Data Build Tool.pdf
MounikaPolabathina
TeamStation AI System Report LATAM IT Salaries 2024
TeamStation AI System Report LATAM IT Salaries 2024
Lonnie McRorey
(How to Program) Paul Deitel, Harvey Deitel-Java How to Program, Early Object...
(How to Program) Paul Deitel, Harvey Deitel-Java How to Program, Early Object...
AliaaTarek5
How to Effectively Monitor SD-WAN and SASE Environments with ThousandEyes
How to Effectively Monitor SD-WAN and SASE Environments with ThousandEyes
ThousandEyes
How AI, OpenAI, and ChatGPT impact business and software.
How AI, OpenAI, and ChatGPT impact business and software.
Curtis Poe
Long journey of Ruby standard library at RubyConf AU 2024
Long journey of Ruby standard library at RubyConf AU 2024
Hiroshi SHIBATA
The Future Roadmap for the Composable Data Stack - Wes McKinney - Data Counci...
The Future Roadmap for the Composable Data Stack - Wes McKinney - Data Counci...
Wes McKinney
A Deep Dive on Passkeys: FIDO Paris Seminar.pptx
A Deep Dive on Passkeys: FIDO Paris Seminar.pptx
LoriGlavin3
TrustArc Webinar - How to Build Consumer Trust Through Data Privacy
TrustArc Webinar - How to Build Consumer Trust Through Data Privacy
TrustArc
The State of Passkeys with FIDO Alliance.pptx
The State of Passkeys with FIDO Alliance.pptx
LoriGlavin3
Digital Identity is Under Attack: FIDO Paris Seminar.pptx
Digital Identity is Under Attack: FIDO Paris Seminar.pptx
LoriGlavin3
Testing tools and AI - ideas what to try with some tool examples
Testing tools and AI - ideas what to try with some tool examples
Kari Kakkonen
The Ultimate Guide to Choosing WordPress Pros and Cons
The Ultimate Guide to Choosing WordPress Pros and Cons
Pixlogix Infotech
Generative Artificial Intelligence: How generative AI works.pdf
Generative Artificial Intelligence: How generative AI works.pdf
Ingrid Airi González
Último
(20)
Data governance with Unity Catalog Presentation
Data governance with Unity Catalog Presentation
The Fit for Passkeys for Employee and Consumer Sign-ins: FIDO Paris Seminar.pptx
The Fit for Passkeys for Employee and Consumer Sign-ins: FIDO Paris Seminar.pptx
A Journey Into the Emotions of Software Developers
A Journey Into the Emotions of Software Developers
Take control of your SAP testing with UiPath Test Suite
Take control of your SAP testing with UiPath Test Suite
Moving Beyond Passwords: FIDO Paris Seminar.pdf
Moving Beyond Passwords: FIDO Paris Seminar.pdf
Emixa Mendix Meetup 11 April 2024 about Mendix Native development
Emixa Mendix Meetup 11 April 2024 about Mendix Native development
What is DBT - The Ultimate Data Build Tool.pdf
What is DBT - The Ultimate Data Build Tool.pdf
TeamStation AI System Report LATAM IT Salaries 2024
TeamStation AI System Report LATAM IT Salaries 2024
(How to Program) Paul Deitel, Harvey Deitel-Java How to Program, Early Object...
(How to Program) Paul Deitel, Harvey Deitel-Java How to Program, Early Object...
How to Effectively Monitor SD-WAN and SASE Environments with ThousandEyes
How to Effectively Monitor SD-WAN and SASE Environments with ThousandEyes
How AI, OpenAI, and ChatGPT impact business and software.
How AI, OpenAI, and ChatGPT impact business and software.
Long journey of Ruby standard library at RubyConf AU 2024
Long journey of Ruby standard library at RubyConf AU 2024
The Future Roadmap for the Composable Data Stack - Wes McKinney - Data Counci...
The Future Roadmap for the Composable Data Stack - Wes McKinney - Data Counci...
A Deep Dive on Passkeys: FIDO Paris Seminar.pptx
A Deep Dive on Passkeys: FIDO Paris Seminar.pptx
TrustArc Webinar - How to Build Consumer Trust Through Data Privacy
TrustArc Webinar - How to Build Consumer Trust Through Data Privacy
The State of Passkeys with FIDO Alliance.pptx
The State of Passkeys with FIDO Alliance.pptx
Digital Identity is Under Attack: FIDO Paris Seminar.pptx
Digital Identity is Under Attack: FIDO Paris Seminar.pptx
Testing tools and AI - ideas what to try with some tool examples
Testing tools and AI - ideas what to try with some tool examples
The Ultimate Guide to Choosing WordPress Pros and Cons
The Ultimate Guide to Choosing WordPress Pros and Cons
Generative Artificial Intelligence: How generative AI works.pdf
Generative Artificial Intelligence: How generative AI works.pdf
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
9.
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>
21.
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
25.
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)
34.
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”/>
38.
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
41.
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
68.
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
76.
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
83.
84.
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
87.
88.
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 •
95.
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
104.
105.
106.
107.
• React Native • React
Native • Breaking Change
108.
109.
• • • v2 2
110.
React Native
111.
React Native
112.
React Native
113.
• WebView React •
UI Native Component/Module • Android Java,
114.
React Native
115.
116.
React Android
117.
!