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
310
Featured
See All Featured
Large-scale JavaScript Application Architecture
addyosmani
512
110k
Improving Core Web Vitals using Speculation Rules API
sergeychernyshev
18
1.1k
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
656
61k
A designer walks into a library…
pauljervisheath
207
24k
How GitHub (no longer) Works
holman
315
140k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
48
9.7k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
PRO
187
55k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
367
27k
Designing Experiences People Love
moore
142
24k
What's in a price? How to price your products and services
michaelherold
246
12k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
49
3k
Building Applications with DynamoDB
mza
96
6.6k
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...