Submit Search
Upload
React Native Androidはなぜ動くのか
•
13 likes
•
11,246 views
Yukiya Nakagawa
Follow
DroidKaigi 2018で講演したやつです
Read less
Read more
Technology
Report
Share
Report
Share
1 of 144
Download now
Download to read offline
Recommended
React Nativeの光と闇
React Nativeの光と闇
Yukiya Nakagawa
The Internet as Web Services: introduction to ReST
The Internet as Web Services: introduction to ReST
Bruno Kessler Foundation
Introduction to react js
Introduction to react js
Aeshan Wijetunge
Software Craftsmanship @Code Camp Festival 2022.pdf
Software Craftsmanship @Code Camp Festival 2022.pdf
Victor Rentea
Inner class
Inner class
Guna Sekaran
Java Basics
Java Basics
Sunil OS
Its time to React.js
Its time to React.js
Ritesh Mehrotra
Reactjs Basics
Reactjs Basics
Hamid Ghorbani
Recommended
React Nativeの光と闇
React Nativeの光と闇
Yukiya Nakagawa
The Internet as Web Services: introduction to ReST
The Internet as Web Services: introduction to ReST
Bruno Kessler Foundation
Introduction to react js
Introduction to react js
Aeshan Wijetunge
Software Craftsmanship @Code Camp Festival 2022.pdf
Software Craftsmanship @Code Camp Festival 2022.pdf
Victor Rentea
Inner class
Inner class
Guna Sekaran
Java Basics
Java Basics
Sunil OS
Its time to React.js
Its time to React.js
Ritesh Mehrotra
Reactjs Basics
Reactjs Basics
Hamid Ghorbani
20150925171021015 9 2015년분류체계
20150925171021015 9 2015년분류체계
활 김
Best practices for RESTful web service design
Best practices for RESTful web service design
Ramin Orujov
Java 8 streams
Java 8 streams
Manav Prasad
Dependency injection ppt
Dependency injection ppt
Swati Srivastava
DevNetCreate Workshop - build a react app - React crash course
DevNetCreate Workshop - build a react app - React crash course
Cisco DevNet
Threads V4
Threads V4
Sunil OS
[C++ Korea] Effective Modern C++ Study, Item 11 - 13
[C++ Korea] Effective Modern C++ Study, Item 11 - 13
Chris Ohk
REST API and CRUD
REST API and CRUD
Prem Sanil
Functional Patterns with Java8 @Bucharest Java User Group
Functional Patterns with Java8 @Bucharest Java User Group
Victor Rentea
React lecture
React lecture
Christoffer Noring
Server side rendering vs client side rendering
Server side rendering vs client side rendering
Alexandr Lazarev
Factory Method Pattern
Factory Method Pattern
Anjan Kumar Bollam
20180518 QNAP Seminar - Introduction to React Native
20180518 QNAP Seminar - Introduction to React Native
Eric Deng
React JS: A Secret Preview
React JS: A Secret Preview
valuebound
Building Web Apps with WebAssembly and Blazor
Building Web Apps with WebAssembly and Blazor
Amir Zuker
Java Generics - by Example
Java Generics - by Example
CodeOps Technologies LLP
Wt unit 3
Wt unit 3
team11vgnt
React Native
React Native
Fatih Şimşek
Threads 06: Coleções concorrentes
Threads 06: Coleções concorrentes
Helder da Rocha
[JCConf 2020] 用 Kotlin 跨入 Serverless 世代
[JCConf 2020] 用 Kotlin 跨入 Serverless 世代
Shengyou Fan
React Nativeはクロスプラットフォームモバイルアプリ開発の夢を見るか #DroidKaigi
React Nativeはクロスプラットフォームモバイルアプリ開発の夢を見るか #DroidKaigi
Yukiya Nakagawa
Workshop 26: React Native - The Native Side
Workshop 26: React Native - The Native Side
Visual Engineering
More Related Content
What's hot
20150925171021015 9 2015년분류체계
20150925171021015 9 2015년분류체계
활 김
Best practices for RESTful web service design
Best practices for RESTful web service design
Ramin Orujov
Java 8 streams
Java 8 streams
Manav Prasad
Dependency injection ppt
Dependency injection ppt
Swati Srivastava
DevNetCreate Workshop - build a react app - React crash course
DevNetCreate Workshop - build a react app - React crash course
Cisco DevNet
Threads V4
Threads V4
Sunil OS
[C++ Korea] Effective Modern C++ Study, Item 11 - 13
[C++ Korea] Effective Modern C++ Study, Item 11 - 13
Chris Ohk
REST API and CRUD
REST API and CRUD
Prem Sanil
Functional Patterns with Java8 @Bucharest Java User Group
Functional Patterns with Java8 @Bucharest Java User Group
Victor Rentea
React lecture
React lecture
Christoffer Noring
Server side rendering vs client side rendering
Server side rendering vs client side rendering
Alexandr Lazarev
Factory Method Pattern
Factory Method Pattern
Anjan Kumar Bollam
20180518 QNAP Seminar - Introduction to React Native
20180518 QNAP Seminar - Introduction to React Native
Eric Deng
React JS: A Secret Preview
React JS: A Secret Preview
valuebound
Building Web Apps with WebAssembly and Blazor
Building Web Apps with WebAssembly and Blazor
Amir Zuker
Java Generics - by Example
Java Generics - by Example
CodeOps Technologies LLP
Wt unit 3
Wt unit 3
team11vgnt
React Native
React Native
Fatih Şimşek
Threads 06: Coleções concorrentes
Threads 06: Coleções concorrentes
Helder da Rocha
[JCConf 2020] 用 Kotlin 跨入 Serverless 世代
[JCConf 2020] 用 Kotlin 跨入 Serverless 世代
Shengyou Fan
What's hot
(20)
20150925171021015 9 2015년분류체계
20150925171021015 9 2015년분류체계
Best practices for RESTful web service design
Best practices for RESTful web service design
Java 8 streams
Java 8 streams
Dependency injection ppt
Dependency injection ppt
DevNetCreate Workshop - build a react app - React crash course
DevNetCreate Workshop - build a react app - React crash course
Threads V4
Threads V4
[C++ Korea] Effective Modern C++ Study, Item 11 - 13
[C++ Korea] Effective Modern C++ Study, Item 11 - 13
REST API and CRUD
REST API and CRUD
Functional Patterns with Java8 @Bucharest Java User Group
Functional Patterns with Java8 @Bucharest Java User Group
React lecture
React lecture
Server side rendering vs client side rendering
Server side rendering vs client side rendering
Factory Method Pattern
Factory Method Pattern
20180518 QNAP Seminar - Introduction to React Native
20180518 QNAP Seminar - Introduction to React Native
React JS: A Secret Preview
React JS: A Secret Preview
Building Web Apps with WebAssembly and Blazor
Building Web Apps with WebAssembly and Blazor
Java Generics - by Example
Java Generics - by Example
Wt unit 3
Wt unit 3
React Native
React Native
Threads 06: Coleções concorrentes
Threads 06: Coleções concorrentes
[JCConf 2020] 用 Kotlin 跨入 Serverless 世代
[JCConf 2020] 用 Kotlin 跨入 Serverless 世代
Similar to React Native Androidはなぜ動くのか
React Nativeはクロスプラットフォームモバイルアプリ開発の夢を見るか #DroidKaigi
React Nativeはクロスプラットフォームモバイルアプリ開発の夢を見るか #DroidKaigi
Yukiya Nakagawa
Workshop 26: React Native - The Native Side
Workshop 26: React Native - The Native Side
Visual Engineering
Build web apps with react js
Build web apps with react js
dhanushkacnd
An Emoji Introduction to React Native (Panagiotis Vourtsis, Senior Front End ...
An Emoji Introduction to React Native (Panagiotis Vourtsis, Senior Front End ...
GreeceJS
Android development
Android development
Gregoire BARRET
Getting Started with React v16
Getting Started with React v16
Benny Neugebauer
React native by example by Vadim Ruban
React native by example by Vadim Ruban
Lohika_Odessa_TechTalks
React & Redux for noobs
React & Redux for noobs
[T]echdencias
Let's react - Meetup
Let's react - Meetup
RAJNISH KATHAROTIYA
Intro react js
Intro react js
Vijayakanth MP
Mobile Day - React Native
Mobile Day - React Native
Software Guru
A full introductory guide to React
A full introductory guide to React
Jean Carlo Emer
Overview of Android Infrastructure
Overview of Android Infrastructure
Alexey Buzdin
Overview of Android Infrastructure
Overview of Android Infrastructure
C.T.Co
Connect.js - Exploring React.Native
Connect.js - Exploring React.Native
joshcjensen
React outbox
React outbox
Angela Lehru
Crossing platforms with JavaScript & React
Crossing platforms with JavaScript & React
Robert DeLuca
Simple React Todo List
Simple React Todo List
Ritesh Chaudhari
[Final] ReactJS presentation
[Final] ReactJS presentation
洪 鹏发
EWD 3 Training Course Part 38: Building a React.js application with QEWD, Part 4
EWD 3 Training Course Part 38: Building a React.js application with QEWD, Part 4
Rob Tweed
Similar to React Native Androidはなぜ動くのか
(20)
React Nativeはクロスプラットフォームモバイルアプリ開発の夢を見るか #DroidKaigi
React Nativeはクロスプラットフォームモバイルアプリ開発の夢を見るか #DroidKaigi
Workshop 26: React Native - The Native Side
Workshop 26: React Native - The Native Side
Build web apps with react js
Build web apps with react js
An Emoji Introduction to React Native (Panagiotis Vourtsis, Senior Front End ...
An Emoji Introduction to React Native (Panagiotis Vourtsis, Senior Front End ...
Android development
Android development
Getting Started with React v16
Getting Started with React v16
React native by example by Vadim Ruban
React native by example by Vadim Ruban
React & Redux for noobs
React & Redux for noobs
Let's react - Meetup
Let's react - Meetup
Intro react js
Intro react js
Mobile Day - React Native
Mobile Day - React Native
A full introductory guide to React
A full introductory guide to React
Overview of Android Infrastructure
Overview of Android Infrastructure
Overview of Android Infrastructure
Overview of Android Infrastructure
Connect.js - Exploring React.Native
Connect.js - Exploring React.Native
React outbox
React outbox
Crossing platforms with JavaScript & React
Crossing platforms with JavaScript & React
Simple React Todo List
Simple React Todo List
[Final] ReactJS presentation
[Final] ReactJS presentation
EWD 3 Training Course Part 38: Building a React.js application with QEWD, Part 4
EWD 3 Training Course Part 38: Building a React.js application with QEWD, Part 4
More from 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
React Nativeアプリをリリースし続けるために、最初に行う8つの取り組み
React Nativeアプリをリリースし続けるために、最初に行う8つの取り組み
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
More from Yukiya Nakagawa
(20)
Atomic Designは「マルチ」で真価を発揮する
Atomic Designは「マルチ」で真価を発揮する
Androidの入門書を書いたときに気にしたこと #NDS57
Androidの入門書を書いたときに気にしたこと #NDS57
アグリノートにおけるGIS情報を活かした圃場・作付管理の取り組み @ FOSS4GJ
アグリノートにおけるGIS情報を活かした圃場・作付管理の取り組み @ FOSS4GJ
CSS in JSの話 #friday13json
CSS in JSの話 #friday13json
React Nativeアプリをリリースし続けるために、最初に行う8つの取り組み
React Nativeアプリをリリースし続けるために、最初に行う8つの取り組み
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会津
ぼくらの錬金術〜キメラの作り方〜
ぼくらの錬金術〜キメラの作り方〜
Recently uploaded
Unleash Your Potential - Namagunga Girls Coding Club
Unleash Your Potential - Namagunga Girls Coding Club
Kalema Edgar
SAP Build Work Zone - Overview L2-L3.pptx
SAP Build Work Zone - Overview L2-L3.pptx
NavinnSomaal
AI as an Interface for Commercial Buildings
AI as an Interface for Commercial Buildings
Memoori
DevoxxFR 2024 Reproducible Builds with Apache Maven
DevoxxFR 2024 Reproducible Builds with Apache Maven
Hervé Boutemy
Search Engine Optimization SEO PDF for 2024.pdf
Search Engine Optimization SEO PDF for 2024.pdf
RankYa
E-Vehicle_Hacking_by_Parul Sharma_null_owasp.pptx
E-Vehicle_Hacking_by_Parul Sharma_null_owasp.pptx
null - The Open Security Community
WordPress Websites for Engineers: Elevate Your Brand
WordPress Websites for Engineers: Elevate Your Brand
gvaughan
Install Stable Diffusion in windows machine
Install Stable Diffusion in windows machine
Padma Pradeep
Ensuring Technical Readiness For Copilot in Microsoft 365
Ensuring Technical Readiness For Copilot in Microsoft 365
2toLead Limited
Unraveling Multimodality with Large Language Models.pdf
Unraveling Multimodality with Large Language Models.pdf
Alex Barbosa Coqueiro
Scanning the Internet for External Cloud Exposures via SSL Certs
Scanning the Internet for External Cloud Exposures via SSL Certs
Rizwan Syed
The Future of Software Development - Devin AI Innovative Approach.pdf
The Future of Software Development - Devin AI Innovative Approach.pdf
SeasiaInfotech2
What's New in Teams Calling, Meetings and Devices March 2024
What's New in Teams Calling, Meetings and Devices March 2024
Stephanie Beckett
Gen AI in Business - Global Trends Report 2024.pdf
Gen AI in Business - Global Trends Report 2024.pdf
Addepto
My INSURER PTE LTD - Insurtech Innovation Award 2024
My INSURER PTE LTD - Insurtech Innovation Award 2024
The Digital Insurer
Story boards and shot lists for my a level piece
Story boards and shot lists for my a level piece
charlottematthew16
Streamlining Python Development: A Guide to a Modern Project Setup
Streamlining Python Development: A Guide to a Modern Project Setup
Florian Wilhelm
"Federated learning: out of reach no matter how close",Oleksandr Lapshyn
"Federated learning: out of reach no matter how close",Oleksandr Lapshyn
Fwdays
Anypoint Exchange: It’s Not Just a Repo!
Anypoint Exchange: It’s Not Just a Repo!
Manik S Magar
Human Factors of XR: Using Human Factors to Design XR Systems
Human Factors of XR: Using Human Factors to Design XR Systems
Mark Billinghurst
Recently uploaded
(20)
Unleash Your Potential - Namagunga Girls Coding Club
Unleash Your Potential - Namagunga Girls Coding Club
SAP Build Work Zone - Overview L2-L3.pptx
SAP Build Work Zone - Overview L2-L3.pptx
AI as an Interface for Commercial Buildings
AI as an Interface for Commercial Buildings
DevoxxFR 2024 Reproducible Builds with Apache Maven
DevoxxFR 2024 Reproducible Builds with Apache Maven
Search Engine Optimization SEO PDF for 2024.pdf
Search Engine Optimization SEO PDF for 2024.pdf
E-Vehicle_Hacking_by_Parul Sharma_null_owasp.pptx
E-Vehicle_Hacking_by_Parul Sharma_null_owasp.pptx
WordPress Websites for Engineers: Elevate Your Brand
WordPress Websites for Engineers: Elevate Your Brand
Install Stable Diffusion in windows machine
Install Stable Diffusion in windows machine
Ensuring Technical Readiness For Copilot in Microsoft 365
Ensuring Technical Readiness For Copilot in Microsoft 365
Unraveling Multimodality with Large Language Models.pdf
Unraveling Multimodality with Large Language Models.pdf
Scanning the Internet for External Cloud Exposures via SSL Certs
Scanning the Internet for External Cloud Exposures via SSL Certs
The Future of Software Development - Devin AI Innovative Approach.pdf
The Future of Software Development - Devin AI Innovative Approach.pdf
What's New in Teams Calling, Meetings and Devices March 2024
What's New in Teams Calling, Meetings and Devices March 2024
Gen AI in Business - Global Trends Report 2024.pdf
Gen AI in Business - Global Trends Report 2024.pdf
My INSURER PTE LTD - Insurtech Innovation Award 2024
My INSURER PTE LTD - Insurtech Innovation Award 2024
Story boards and shot lists for my a level piece
Story boards and shot lists for my a level piece
Streamlining Python Development: A Guide to a Modern Project Setup
Streamlining Python Development: A Guide to a Modern Project Setup
"Federated learning: out of reach no matter how close",Oleksandr Lapshyn
"Federated learning: out of reach no matter how close",Oleksandr Lapshyn
Anypoint Exchange: It’s Not Just a Repo!
Anypoint Exchange: It’s Not Just a Repo!
Human Factors of XR: Using Human Factors to Design XR Systems
Human Factors of XR: Using Human Factors to Design XR Systems
React Native Androidはなぜ動くのか
1.
React Native Android 2018.2.9
DroidKaigi 2018 Yukiya Nakagawa / @Nkzn Room2 12:50-13:40 #droidkaigi_room2
2.
Who are you? •
Yukiya Nakagawa / @Nkzn • @ • • Android 2009 • React Native v0.17
3.
React Native
4.
• • Hello World •
Production
5.
Target • React Native
Android • Android React Native
6.
Best Match • • JavaScript •
React Native
7.
8.
Agenda
9.
Overview
10.
11.
React
12.
React is
13.
React 2017
14.
React https://facebook.github.io/react/
15.
• • JSX • Reactive
16.
JSX
17.
<div> <Header /> <LeftPane /> <RightPane name={myName}/> </div>
18.
19.
React
20.
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') );
21.
Virtual DOM
22.
<ccc style={{ width: 200, color: "red" }} enabled={true}
/>
23.
React VirtualDOM DOM
24.
React VirtualDOM DOM
25.
React VirtualDOM DOM
26.
React VirtualDOM DOM
27.
https://tylermcginnis.com/an-introduction-to-life-cycle-events-in-react-js/
28.
https://developer.android.com/reference/android/app/Activity.html
29.
React is • Facebook
JS • https://facebook.github.io/react/ • • • View View View
30.
React Native React
31.
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') );
32.
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( "MyReactNativeApp", () => App );
33.
React ReactDOM
34.
React UI React Native
35.
React is not
36.
React • React DOM •
React View Web • React Native • React View UI
37.
React • View props • • •
DOM • UI • • View • UI GUI Virtual DOM
38.
React React DOM
39.
React is not •
React • React View • React View
40.
React Native Android
41.
42.
React Native
43.
React Native • JavaScript •
JS Java • React Android View •
44.
Activity ReactRootView (FrameLayout) JS
45.
Activity ReactRootView JS
46.
Activity ReactRootView JS
47.
Activity ReactRootView JS
48.
JavaScript
49.
Activity ReactRootView JS
50.
JS • JavaScriptCore • WebKit(Safari)
JS • Facebook Android NDK https://github.com/facebook/android-jsc
51.
• ReactRootView God
FrameLayout • ReactInstanceManager JS • CatalystInstance JNI
52.
• ReactInstanceManager • JSC •
JS • CatalystInstance • JNI Java • Java JSC IF startReactApplication() JS
53.
@Override protected void onCreate(Bundle
savedInstanceState) { super.onCreate(savedInstanceState); mReactRootView = new ReactRootView(this); mReactInstanceManager = ReactInstanceManager.builder() .setApplication(getApplication()) .setBundleAssetName("index.android.bundle") .setJSMainModulePath("index") .addPackage(new MainReactPackage()) .setUseDeveloperSupport(BuildConfig.DEBUG) .setInitialLifecycleState(LifecycleState.RESUMED) .build(); mReactRootView.startReactApplication( mReactInstanceManager, "MyReactNativeApp", null); setContentView(mReactRootView); } Java Activity RN
54.
@Override protected void onCreate(Bundle
savedInstanceState) { super.onCreate(savedInstanceState); mReactRootView = new ReactRootView(this); mReactInstanceManager = ReactInstanceManager.builder() .setApplication(getApplication()) .setBundleAssetName("index.android.bundle") .setJSMainModulePath("index") .addPackage(new MainReactPackage()) .setUseDeveloperSupport(BuildConfig.DEBUG) .setInitialLifecycleState(LifecycleState.RESUMED) .build(); mReactRootView.startReactApplication( mReactInstanceManager, "MyReactNativeApp", null); setContentView(mReactRootView); } Java ReactRootView FrameLayout
55.
@Override protected void onCreate(Bundle
savedInstanceState) { super.onCreate(savedInstanceState); mReactRootView = new ReactRootView(this); mReactInstanceManager = ReactInstanceManager.builder() .setApplication(getApplication()) .setBundleAssetName("index.android.bundle") .setJSMainModulePath("index") .addPackage(new MainReactPackage()) .setUseDeveloperSupport(BuildConfig.DEBUG) .setInitialLifecycleState(LifecycleState.RESUMED) .build(); mReactRootView.startReactApplication( mReactInstanceManager, "MyReactNativeApp", null); setContentView(mReactRootView); } Java ReactInstanceManager
56.
@Override protected void onCreate(Bundle
savedInstanceState) { super.onCreate(savedInstanceState); mReactRootView = new ReactRootView(this); mReactInstanceManager = ReactInstanceManager.builder() .setApplication(getApplication()) .setBundleAssetName("index.android.bundle") .setJSMainModulePath("index") .addPackage(new MainReactPackage()) .setUseDeveloperSupport(BuildConfig.DEBUG) .setInitialLifecycleState(LifecycleState.RESUMED) .build(); mReactRootView.startReactApplication( mReactInstanceManager, "MyReactNativeApp", null); setContentView(mReactRootView); } Java RootView InstanceManager
57.
@Override protected void onCreate(Bundle
savedInstanceState) { super.onCreate(savedInstanceState); mReactRootView = new ReactRootView(this); mReactInstanceManager = ReactInstanceManager.builder() .setApplication(getApplication()) .setBundleAssetName("index.android.bundle") .setJSMainModulePath("index") .addPackage(new MainReactPackage()) .setUseDeveloperSupport(BuildConfig.DEBUG) .setInitialLifecycleState(LifecycleState.RESUMED) .build(); mReactRootView.startReactApplication( mReactInstanceManager, "MyReactNativeApp", null); setContentView(mReactRootView); } Java setContentView
58.
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( "MyReactNativeApp", () => App ); MyReactNativeApp
59.
ReactInstance • React JS
Java • React React
60.
JSC JS ReactInstanceManager ↑ View ReactRootView ReactRootView#startReactApplication() Java JavaScript
61.
NDK
62.
JS Java
63.
Activity ReactRootView JS
64.
65.
Native Modules
66.
Native Modules • Java
Swift JS • RN Android Java JS •
67.
Native Modules 3
68.
const ToastAndroid =
require('ToastAndroid'); ToastAndroid.show(" ", ToastAndroid.SHORT); JS Toast JS
69.
@ReactModule(name = "ToastAndroid") public
class ToastModule extends ReactContextBaseJavaModule { @ReactMethod public void show(final String message, final int duration) { UiThreadUtil.runOnUiThread(() -> { Toast.makeText( getReactApplicationContext(), message, duration).show(); }); } } Toast Java
70.
@ReactModule(name = "ToastAndroid") public
class ToastModule extends ReactContextBaseJavaModule { @ReactMethod public void show(final String message, final int duration) { UiThreadUtil.runOnUiThread(() -> { Toast.makeText( getReactApplicationContext(), message, duration).show(); }); } } ReactContextBaseJavaModule Java
71.
@ReactModule(name = "ToastAndroid") public
class ToastModule extends ReactContextBaseJavaModule { @ReactMethod public void show(final String message, final int duration) { UiThreadUtil.runOnUiThread(() -> { Toast.makeText( getReactApplicationContext(), message, duration).show(); }); } } Native Module Java ※name
72.
@ReactModule(name = "ToastAndroid") public
class ToastModule extends ReactContextBaseJavaModule { @ReactMethod public void show(final String message, final int duration) { UiThreadUtil.runOnUiThread(() -> { Toast.makeText( getReactApplicationContext(), message, duration).show(); }); } } JS @ReactMethod Java
73.
@ReactModule(name = "ToastAndroid") public
class ToastModule extends ReactContextBaseJavaModule { @ReactMethod public void show(final String message, final int duration) { UiThreadUtil.runOnUiThread(() -> { Toast.makeText( getReactApplicationContext(), message, duration).show(); }); } } Android not UI Thread Java
74.
75.
ReactInstanceManager JS
76.
public class ToastPackage
implements ReactPackage { @Override public List<ViewManager> createViewManagers( ReactApplicationContext reactContext) { return Collections.emptyList(); } @Override public List<NativeModule> createNativeModules( ReactApplicationContext reactContext) { return Arrays.<NativeModule>asList( new ToastModule(reactContext)); } } ReactPackage Java
77.
public class ToastPackage
implements ReactPackage { @Override public List<ViewManager> createViewManagers( ReactApplicationContext reactContext) { return Collections.emptyList(); } @Override public List<NativeModule> createNativeModules( ReactApplicationContext reactContext) { return Arrays.<NativeModule>asList( new ToastModule(reactContext)); } } ReactPackage Java
78.
public class ToastPackage
implements ReactPackage { @Override public List<ViewManager> createViewManagers( ReactApplicationContext reactContext) { return Collections.emptyList(); } @Override public List<NativeModule> createNativeModules( ReactApplicationContext reactContext) { return Arrays.<NativeModule>asList( new ToastModule(reactContext)); } } createNativeModules Java
79.
ReactInstanceManager.builder() .setApplication(getApplication()) .setBundleAssetName("index.android.bundle") .setJSMainModulePath("index") .addPackage(new MainReactPackage()) .addPackage(new ToastPackage()) .setUseDeveloperSupport(BuildConfig.DEBUG) .setInitialLifecycleState(LifecycleState.RESUMED) .build(); ReactInstanceManager Java
80.
ReactInstanceManager.builder() .setApplication(getApplication()) .setBundleAssetName("index.android.bundle") .setJSMainModulePath("index") .addPackage(new MainReactPackage()) .addPackage(new ToastPackage()) .setUseDeveloperSupport(BuildConfig.DEBUG) .setInitialLifecycleState(LifecycleState.RESUMED) .build(); Java
81.
ReactInstanceManager JSC JS
82.
const ToastAndroid =
require('ToastAndroid'); ToastAndroid.show(" ", ToastAndroid.SHORT); JavaScript JS
83.
Great!
84.
@ReactMethod
85.
Readable/Writable Map/Array • JS Java/C++
86.
+ hasKey(name: String):
boolean + isNull(name: String): boolean + getBoolean(name: String): boolean + getDouble(name: String): double + getInt(name: String): int + getString(name: String): String + getArray(name: String): ReadableArray + getMap(name: String): ReadableMap + getDynamic(name: String): Dynamic + getType(name: String): ReadableType + keySetIterator(): ReadableMapKeySetIterator + toHashMap(): HashMap<String, Object> + putNull(key: String) + putBoolean(key: String, value: boolean) + putDouble(key: String, value: double) + putInt(key: String, value: int) + putString(key: String, value: String) + putArray(key: String, value: WritableArray) + putMap(key: String, value: WritableMap) + merge(source: ReadableMap);
87.
+ size(index: int):
int + isNull(index: int): boolean + getBoolean(index: int): boolean + getDouble(index: int): double + getInt(index: int): int + getString(index: int): String + getArray(index: int): ReadableArray + getMap(index: int): ReadableMap + getDynamic(index: int): Dynamic + getType(index: int): ReadableType + toArrayList(index: int): ArrayList<Object> + pushNull() + pushBoolean(value: boolean) + pushDouble(value: double) + pushInt(value: int) + pushString(value: String) + pushArray(array: WritableArray) + pushMap(map: WritableMap)
88.
JSC++Java { name: "nkzn", age: 30 } [ "cupcake", "donut", "eclair" ]
89.
Promise
90.
Promise • ReactMethod Promise JS
Promise • promise.resolve() promise.reject() JS
91.
@ReactMethod public void getString(Promise
promise) { try { ClipboardManager clipboard = getClipboardService(); ClipData clipData = clipboard.getPrimaryClip(); if (clipData == null) { promise.resolve(""); } else if (clipData.getItemCount() >= 1) { ClipData.Item firstItem = clipboard .getPrimaryClip() .getItemAt(0); promise.resolve("" + firstItem.getText()); } else { promise.resolve(""); } } catch (Exception e) { promise.reject(e); } } Clipboard#getString Java
92.
@ReactMethod public void getString(Promise
promise) { try { ClipboardManager clipboard = getClipboardService(); ClipData clipData = clipboard.getPrimaryClip(); if (clipData == null) { promise.resolve(""); } else if (clipData.getItemCount() >= 1) { ClipData.Item firstItem = clipboard .getPrimaryClip() .getItemAt(0); promise.resolve("" + firstItem.getText()); } else { promise.resolve(""); } } catch (Exception e) { promise.reject(e); } } JS RxJava onNext, onError ※ Clipboard Java
93.
// Promise Style Clipboard.getString() .then(str
=> { // use string }); // async/await Style async function getClip() { const str = await Clipboard.getString(); return str; } JS JS
94.
Java JS
95.
EventEmitter Android Broadcast
96.
// JS class RCTDeviceEventEmitter
extends EventEmitter { emit(eventType) {...} addListener(eventType, listener, context) {...} removeAllListeners(eventType) {...} removeSubscription(subscription) {...} } JS RCTDeviceEventEmitter.js ※ emit EventEmitter
97.
// interface // ReactInstanceModule public
interface RCTDeviceEventEmitter extends JavaScriptModule { void emit(String eventName, @Nullable Object data); } Java DeviceEventManagerModule.java
98.
// JS public void
emitHardwareBackPressed() { getReactApplicationContext() .getJSModule(RCTDeviceEventEmitter.class) .emit("hardwareBackPress", null); } JS emit Java DeviceEventManagerModule.java
99.
C++
100.
JS→Java ReactModule Java→JS JavaScriptModule
101.
ReactModule React 🤔
102.
React Android View
103.
Activity ReactRootView JS
104.
React DOM Android
105.
Android View React
106.
Native UI Components 3
107.
public class PhotoView
extends ImageView { public PhotoView(Context context) { ... } // Android } Java
108.
public class PhotoViewManager extends
SimpleViewManager<PhotoView> { @Override public String getName() { return "PhotoView"; } @Override protected PhotoView createViewInstance( ThemedReactContext reactContext) { return new PhotoView(reactContext); } @ReactProp(name = "uri") public void setUri(PhotoView view, @Nullable String uri) { view.setUri(uri); } } React Java
109.
public class PhotoViewManager extends
SimpleViewManager<PhotoView> { @Override public String getName() { return "PhotoView"; } @Override protected PhotoView createViewInstance( ThemedReactContext reactContext) { return new PhotoView(reactContext); } @ReactProp(name = "uri") public void setUri(PhotoView view, @Nullable String uri) { view.setUri(uri); } } SimpleViewManager Java
110.
public class PhotoViewManager extends
SimpleViewManager<PhotoView> { @Override public String getName() { return "PhotoView"; } @Override protected PhotoView createViewInstance( ThemedReactContext reactContext) { return new PhotoView(reactContext); } @ReactProp(name = "uri") public void setUri(PhotoView view, @Nullable String uri) { view.setUri(uri); } } React Java
111.
public class PhotoViewManager extends
SimpleViewManager<PhotoView> { @Override public String getName() { return "PhotoView"; } @Override protected PhotoView createViewInstance( ThemedReactContext reactContext) { return new PhotoView(reactContext); } @ReactProp(name = "uri") public void setUri(PhotoView view, @Nullable String uri) { view.setUri(uri); } } Android View Java
112.
public class PhotoViewManager extends
SimpleViewManager<PhotoView> { @Override public String getName() { return "PhotoView"; } @Override protected PhotoView createViewInstance( ThemedReactContext reactContext) { return new PhotoView(reactContext); } @ReactProp(name = "uri") public void setUri(PhotoView view, @Nullable String uri) { view.setUri(uri); } } props Java
113.
// @ReactProp(name = "uri") public
void setUri(PhotoView view, @Nullable String uri) { view.setUri(uri); } // <PhotoView uri="http://example.com/hoge.png" /> Java JS
114.
115.
public class MyLibraryPackage
implements ReactPackage { @Override public List<ViewManager> createViewManagers( ReactApplicationContext reactContext) { return Arrays.<ViewManager>asList( new PhotoViewManager() ); } @Override public List<NativeModule> createNativeModules( ReactApplicationContext reactContext) { return Collections.emptyList(); } } ReactPackage Java
116.
public class MyLibraryPackage
implements ReactPackage { @Override public List<ViewManager> createViewManagers( ReactApplicationContext reactContext) { return Arrays.<ViewManager>asList( new PhotoViewManager() ); } @Override public List<NativeModule> createNativeModules( ReactApplicationContext reactContext) { return Collections.emptyList(); } } createViewManagers Java
117.
ReactInstanceManager Native Modules
118.
import PropTypes from
“prop-types”; import { requireNativeComponent, View } from "react-native"; const name = "PhotoView"; const photoViewInterface = { name: name, displayName: name, propTypes: { ...View.propTypes, uri: PropTypes.string.isRequired } }; export default requireNativeComponent(name, photoViewInterface); JS PhotoView.js JS Java Java
119.
import PhotoView from
"./PhotoView"; // <PhotoView uri="http://example.com/hoge.png" /> JS
120.
121.
• JS UI props
interface • ViewManager
122.
React Android View
123.
124.
Native Module UIManagerModule
125.
UIManagerModule • React React Native
React DOM Java • createView updateView ReactMethod
126.
@ReactMethod public void createView( int
tag, String className, int rootViewTag, ReadableMap props) { mUIImplementation.createView( tag, className, rootViewTag, props); } @ReactMethod public void updateView( int tag, String className, ReadableMap props) { mUIImplementation.updateView( tag, className, props); } UIManagerModule.java
127.
React ReactMethod
128.
View • React View
Java ReactShadowNode Java View Yoga • UIManagerModule React Java View • View View
129.
Yoga https://facebook.github.io/yoga/
130.
• Flexbox Yoga Android •
borderColor ViewManager Android setBorderColor
131.
React
132.
• Java C++
JS • ReactInstanceManager • ReactInstanceManager Native Module JavaScript Module • UI Native Module
133.
React Native Modules
134.
Android
135.
• Android APK • APK
136.
Application Sources import $buildDir/intermediates /assets/release /res/merged/release
137.
iOS require("path/to/awesome.png")
138.
iOS
139.
140.
React Native Android •
API View Android • • JS JS
141.
• Android SDK
iOS SDK • Web • JS
142.
143.
• React Native http://tomoima525.hatenablog.com/entry/2017/12/19/180523 •
Android 7 https://peaks.cc/Nkzn/architecture_patterns @tomoaki_imai
Download now