Soumettre la recherche
Mettre en ligne
React Native Androidはなぜ動くのか
•
13 j'aime
•
11,249 vues
Yukiya Nakagawa
Suivre
DroidKaigi 2018で講演したやつです
Lire moins
Lire la suite
Technologie
Signaler
Partager
Signaler
Partager
1 sur 144
Télécharger maintenant
Télécharger pour lire hors ligne
Recommandé
React Nativeの光と闇
React Nativeの光と闇
Yukiya Nakagawa
An introduction to React.js
An introduction to React.js
Emanuele DelBono
React js
React js
Jai Santhosh
Introduction to ReactJS
Introduction to ReactJS
Knoldus Inc.
Its time to React.js
Its time to React.js
Ritesh Mehrotra
React JS & Functional Programming Principles
React JS & Functional Programming Principles
Andrii Lundiak
A Brief Introduction to React.js
A Brief Introduction to React.js
Doug Neiner
Reactjs
Reactjs
Mallikarjuna G D
Recommandé
React Nativeの光と闇
React Nativeの光と闇
Yukiya Nakagawa
An introduction to React.js
An introduction to React.js
Emanuele DelBono
React js
React js
Jai Santhosh
Introduction to ReactJS
Introduction to ReactJS
Knoldus Inc.
Its time to React.js
Its time to React.js
Ritesh Mehrotra
React JS & Functional Programming Principles
React JS & Functional Programming Principles
Andrii Lundiak
A Brief Introduction to React.js
A Brief Introduction to React.js
Doug Neiner
Reactjs
Reactjs
Mallikarjuna G D
Reactjs
Reactjs
Neha Sharma
React & Redux JS
React & Redux JS
Hamed Farag
React + Redux Introduction
React + Redux Introduction
Nikolaus Graf
React JS and why it's awesome
React JS and why it's awesome
Andrew Hull
React js
React js
Oswald Campesato
Introduction to React JS
Introduction to React JS
Arno Lordkronos
React js
React js
Rajesh Kolla
Introduction to flutter's basic concepts
Introduction to flutter's basic concepts
Kumaresh Chandra Baruri
React js for beginners
React js for beginners
Alessandro Valenti
React JS - Introduction
React JS - Introduction
Sergey Romaneko
ReactJS presentation
ReactJS presentation
Thanh Tuong
Intro to react native
Intro to react native
ModusJesus
React for Dummies
React for Dummies
Mitch Chen
Introduction to React JS for beginners
Introduction to React JS for beginners
Varun Raj
[Final] ReactJS presentation
[Final] ReactJS presentation
洪 鹏发
Introduction to React JS for beginners | Namespace IT
Introduction to React JS for beginners | Namespace IT
namespaceit
React js
React js
Alireza Akbari
React JS - A quick introduction tutorial
React JS - A quick introduction tutorial
Mohammed Fazuluddin
How to Convert a Component Design into an MUI React Code
How to Convert a Component Design into an MUI React Code
WrapPixel
Introduction to React JS
Introduction to React JS
Bethmi Gunasekara
React Nativeはクロスプラットフォームモバイルアプリ開発の夢を見るか #DroidKaigi
React Nativeはクロスプラットフォームモバイルアプリ開発の夢を見るか #DroidKaigi
Yukiya Nakagawa
Workshop 26: React Native - The Native Side
Workshop 26: React Native - The Native Side
Visual Engineering
Contenu connexe
Tendances
Reactjs
Reactjs
Neha Sharma
React & Redux JS
React & Redux JS
Hamed Farag
React + Redux Introduction
React + Redux Introduction
Nikolaus Graf
React JS and why it's awesome
React JS and why it's awesome
Andrew Hull
React js
React js
Oswald Campesato
Introduction to React JS
Introduction to React JS
Arno Lordkronos
React js
React js
Rajesh Kolla
Introduction to flutter's basic concepts
Introduction to flutter's basic concepts
Kumaresh Chandra Baruri
React js for beginners
React js for beginners
Alessandro Valenti
React JS - Introduction
React JS - Introduction
Sergey Romaneko
ReactJS presentation
ReactJS presentation
Thanh Tuong
Intro to react native
Intro to react native
ModusJesus
React for Dummies
React for Dummies
Mitch Chen
Introduction to React JS for beginners
Introduction to React JS for beginners
Varun Raj
[Final] ReactJS presentation
[Final] ReactJS presentation
洪 鹏发
Introduction to React JS for beginners | Namespace IT
Introduction to React JS for beginners | Namespace IT
namespaceit
React js
React js
Alireza Akbari
React JS - A quick introduction tutorial
React JS - A quick introduction tutorial
Mohammed Fazuluddin
How to Convert a Component Design into an MUI React Code
How to Convert a Component Design into an MUI React Code
WrapPixel
Introduction to React JS
Introduction to React JS
Bethmi Gunasekara
Tendances
(20)
Reactjs
Reactjs
React & Redux JS
React & Redux JS
React + Redux Introduction
React + Redux Introduction
React JS and why it's awesome
React JS and why it's awesome
React js
React js
Introduction to React JS
Introduction to React JS
React js
React js
Introduction to flutter's basic concepts
Introduction to flutter's basic concepts
React js for beginners
React js for beginners
React JS - Introduction
React JS - Introduction
ReactJS presentation
ReactJS presentation
Intro to react native
Intro to react native
React for Dummies
React for Dummies
Introduction to React JS for beginners
Introduction to React JS for beginners
[Final] ReactJS presentation
[Final] ReactJS presentation
Introduction to React JS for beginners | Namespace IT
Introduction to React JS for beginners | Namespace IT
React js
React js
React JS - A quick introduction tutorial
React JS - A quick introduction tutorial
How to Convert a Component Design into an MUI React Code
How to Convert a Component Design into an MUI React Code
Introduction to React JS
Introduction to React JS
Similaire à 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
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
React Native for multi-platform mobile applications
React Native for multi-platform mobile applications
Matteo Manchi
Similaire à 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
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
React Native for multi-platform mobile applications
React Native for multi-platform mobile applications
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
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
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
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会津
ぼくらの錬金術〜キメラの作り方〜
ぼくらの錬金術〜キメラの作り方〜
Dernier
How to Troubleshoot Apps for the Modern Connected Worker
How to Troubleshoot Apps for the Modern Connected Worker
ThousandEyes
Workshop - Best of Both Worlds_ Combine KG and Vector search for enhanced R...
Workshop - Best of Both Worlds_ Combine KG and Vector search for enhanced R...
Neo4j
Boost Fertility New Invention Ups Success Rates.pdf
Boost Fertility New Invention Ups Success Rates.pdf
sudhanshuwaghmare1
ProductAnonymous-April2024-WinProductDiscovery-MelissaKlemke
ProductAnonymous-April2024-WinProductDiscovery-MelissaKlemke
Product Anonymous
Strategize a Smooth Tenant-to-tenant Migration and Copilot Takeoff
Strategize a Smooth Tenant-to-tenant Migration and Copilot Takeoff
sammart93
Artificial Intelligence: Facts and Myths
Artificial Intelligence: Facts and Myths
Joaquim Jorge
From Event to Action: Accelerate Your Decision Making with Real-Time Automation
From Event to Action: Accelerate Your Decision Making with Real-Time Automation
Safe Software
Apidays New York 2024 - Scaling API-first by Ian Reasor and Radu Cotescu, Adobe
Apidays New York 2024 - Scaling API-first by Ian Reasor and Radu Cotescu, Adobe
apidays
A Year of the Servo Reboot: Where Are We Now?
A Year of the Servo Reboot: Where Are We Now?
Igalia
Deploy with confidence: VMware Cloud Foundation 5.1 on next gen Dell PowerEdg...
Deploy with confidence: VMware Cloud Foundation 5.1 on next gen Dell PowerEdg...
Principled Technologies
Exploring the Future Potential of AI-Enabled Smartphone Processors
Exploring the Future Potential of AI-Enabled Smartphone Processors
debabhi2
Boost PC performance: How more available memory can improve productivity
Boost PC performance: How more available memory can improve productivity
Principled Technologies
GenAI Risks & Security Meetup 01052024.pdf
GenAI Risks & Security Meetup 01052024.pdf
lior mazor
Connector Corner: Accelerate revenue generation using UiPath API-centric busi...
Connector Corner: Accelerate revenue generation using UiPath API-centric busi...
DianaGray10
Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...
Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...
Miguel Araújo
Data Cloud, More than a CDP by Matt Robison
Data Cloud, More than a CDP by Matt Robison
Anna Loughnan Colquhoun
Apidays Singapore 2024 - Building Digital Trust in a Digital Economy by Veron...
Apidays Singapore 2024 - Building Digital Trust in a Digital Economy by Veron...
apidays
Partners Life - Insurer Innovation Award 2024
Partners Life - Insurer Innovation Award 2024
The Digital Insurer
Repurposing LNG terminals for Hydrogen Ammonia: Feasibility and Cost Saving
Repurposing LNG terminals for Hydrogen Ammonia: Feasibility and Cost Saving
Edi Saputra
Strategies for Landing an Oracle DBA Job as a Fresher
Strategies for Landing an Oracle DBA Job as a Fresher
Remote DBA Services
Dernier
(20)
How to Troubleshoot Apps for the Modern Connected Worker
How to Troubleshoot Apps for the Modern Connected Worker
Workshop - Best of Both Worlds_ Combine KG and Vector search for enhanced R...
Workshop - Best of Both Worlds_ Combine KG and Vector search for enhanced R...
Boost Fertility New Invention Ups Success Rates.pdf
Boost Fertility New Invention Ups Success Rates.pdf
ProductAnonymous-April2024-WinProductDiscovery-MelissaKlemke
ProductAnonymous-April2024-WinProductDiscovery-MelissaKlemke
Strategize a Smooth Tenant-to-tenant Migration and Copilot Takeoff
Strategize a Smooth Tenant-to-tenant Migration and Copilot Takeoff
Artificial Intelligence: Facts and Myths
Artificial Intelligence: Facts and Myths
From Event to Action: Accelerate Your Decision Making with Real-Time Automation
From Event to Action: Accelerate Your Decision Making with Real-Time Automation
Apidays New York 2024 - Scaling API-first by Ian Reasor and Radu Cotescu, Adobe
Apidays New York 2024 - Scaling API-first by Ian Reasor and Radu Cotescu, Adobe
A Year of the Servo Reboot: Where Are We Now?
A Year of the Servo Reboot: Where Are We Now?
Deploy with confidence: VMware Cloud Foundation 5.1 on next gen Dell PowerEdg...
Deploy with confidence: VMware Cloud Foundation 5.1 on next gen Dell PowerEdg...
Exploring the Future Potential of AI-Enabled Smartphone Processors
Exploring the Future Potential of AI-Enabled Smartphone Processors
Boost PC performance: How more available memory can improve productivity
Boost PC performance: How more available memory can improve productivity
GenAI Risks & Security Meetup 01052024.pdf
GenAI Risks & Security Meetup 01052024.pdf
Connector Corner: Accelerate revenue generation using UiPath API-centric busi...
Connector Corner: Accelerate revenue generation using UiPath API-centric busi...
Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...
Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...
Data Cloud, More than a CDP by Matt Robison
Data Cloud, More than a CDP by Matt Robison
Apidays Singapore 2024 - Building Digital Trust in a Digital Economy by Veron...
Apidays Singapore 2024 - Building Digital Trust in a Digital Economy by Veron...
Partners Life - Insurer Innovation Award 2024
Partners Life - Insurer Innovation Award 2024
Repurposing LNG terminals for Hydrogen Ammonia: Feasibility and Cost Saving
Repurposing LNG terminals for Hydrogen Ammonia: Feasibility and Cost Saving
Strategies for Landing an Oracle DBA Job as a Fresher
Strategies for Landing an Oracle DBA Job as a Fresher
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
Télécharger maintenant