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
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
234
17k
Building Better People: How to give real-time feedback that sticks.
wjessup
368
20k
Side Projects
sachag
455
43k
Thoughts on Productivity
jonyablonski
70
4.9k
The Illustrated Children's Guide to Kubernetes
chrisshort
48
51k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
358
30k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
49
3.1k
Optimising Largest Contentful Paint
csswizardry
37
3.4k
4 Signs Your Business is Dying
shpigford
185
22k
Being A Developer After 40
akosma
91
590k
Into the Great Unknown - MozCon
thekraken
40
2.1k
The Web Performance Landscape in 2024 [PerfNow 2024]
tammyeverts
9
850
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...