Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
React Native Inside
Search
TETRA2000
April 27, 2016
0
88
React Native Inside
TETRA2000
April 27, 2016
Tweet
Share
More Decks by TETRA2000
See All by TETRA2000
Gaiaにプルリクを投げた話
tetra2000
0
320
Featured
See All Featured
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
34
2.3k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
37
2.6k
The Illustrated Children's Guide to Kubernetes
chrisshort
49
51k
Six Lessons from altMBA
skipperchong
29
4k
Side Projects
sachag
455
43k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
367
27k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
194
16k
[RailsConf 2023] Rails as a piece of cake
palkan
57
5.9k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
55
3k
Large-scale JavaScript Application Architecture
addyosmani
514
110k
The Web Performance Landscape in 2024 [PerfNow 2024]
tammyeverts
10
890
Done Done
chrislema
185
16k
Transcript
React Native Inside - Android Edition -
React Native ?
React Native
React Native
react-native init AwesomeProject ├── android/ ├── ios ├── index.android.js ├──
index.ios.js ├── node_modules/ └── package.json
react-native init AwesomeProject
Agenda 1. アプリ起動後の処理 2. 仮想DOMの実装 3. ネイティブコード連携箇所の実装
1.アプリ起動後の処理
• ローカルのサーバーからjsを読み込んで起動 • jsをその場でリロード可 react-native run android
Android Project structure
ReactActivity • ReactInstanceManager の保持 • ReactRootView の生成 https://github.com/facebook/react- native/blob/master/ReactAndroid/src/main/j ava/com/facebook/react/ReactActivity.java
ReactActivity -mReactInstanceManager: ReactInstanceManager +createReactInstanceManager(): ReactInstanceManager +createRootView(): ReactRootView +getBundleAssetName(): String +getJSBundleFile(): String Activity
ReactActivity#onCreate 1. ReactActivity#createReactInstanceManager() 2. ReactActivity#createRootView() 3. ReactRootViewr#startReactApplication()
ReactActivity#onCreate 1. ReactActivity#createReactInstanceManager() 2. ReactActivity#createRootView() 3. ReactRootViewr#startReactApplication()
ReactActivity#createReactInstanceManager() • DeveloperSupportの有無 ◦ (DUBUG実行ではON) • JSBundle
• 開発時にJSBundleをサーバーから配信する機能 DeveloperSupport
JSBundleファイル • Jsをサーバーから取得せず、ファイルとしてアプリに同梱 • アプリをリリースするときはこっち Running On Device – React
Native https://facebook.github.io/react-native/docs/running-on-device-ios.html
ReactInstanceManager • ReactApplicationContextの管理 • CatalystInstanceの管理 https://github.com/facebook/react- native/blob/master/ReactAndroid/src/main/jav a/com/facebook/react/ReactInstanceManagerI mpl.java ReactInstanceManagerImpl
-mCurrentReactContext: ReactApplicationContext -mLifecycleState: LifecycleState -mAttachedRootViews: List<ReactRootView> -createReactContext(): ReactApplicationContext
初期化処理の大部分が行われる 1. NativeModuleRegistry, JavaScriptModulesConfigの初期化 2. CatalystInstanceの初期化 3. native/jsモジュールの読み込み a. ReactInstanceManagerImpl#processPackage
4. JSBundleの実行 a. catalystInstance.runJSBundle(); (だいぶ省略してます ) ReactInstanceManager#createReactContext
CatalystInstance NativeとJSのつなぎ込み • JSModule, NativeModuleの管理 • CatalystInstanceImpl +runJSBundle(): void incrementPendingJSCalls
CatalystInstance#runJSBundle
UI, JS, Nativeモジュールの実行スレッドを持つ https://github.com/facebook/react- native/blob/master/ReactAndroid/src/main/java/com/facebook/react/bridge/qu eue/ReactQueueConfigurationImpl.java#L20 ReactQueueConfiguration
MessageQueueThread#callOnQueue
再び、ReactActivity#onCreate 1. ReactActivity#createReactInstanceManager() 2. ReactActivity#createRootView() ◦ (newしてるだけ) 3. ReactRootViewr#startReactApplication()
ReactRootView#startReactApplication mReactInstanceManager.attachMeasuredRootView(this);
ReactInstanceManager#attachMeasuredRootViewToInstance catalystInstance.getJSModule(AppRegistry.class).runApplication (jsAppModuleName, appParams);
JavaScriptModuleRegistry#getJavaScriptModule
Proxy.newProxyInstance java.lang.reflect.Proxy 動的プロキシを作る時に使われる メソッドの処理を動的に変更できる http://qiita. com/obaQ/items/e401d41059d81149da52
Libraries/ • Libraries/ 以下にライブラリのjsファイルが • こいつらがProxy越しに動的に呼ばれる ※インタフェースのjavaファイルは別途存在する
Overview MainActivity ReactActivity ReactInstanceManager ReactRootView ReactApplicationContext CatalystInstance NativeModuleRegistry
Oops!!
本日はここまで 1. アプリ起動後の処理 2. 仮想DOMの実装 次回!! 3. ネイティブコード連携箇所の実装 次回!!
To be continued...