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
74
React Native Inside
TETRA2000
April 27, 2016
Tweet
Share
More Decks by TETRA2000
See All by TETRA2000
Gaiaにプルリクを投げた話
tetra2000
0
270
Featured
See All Featured
The Language of Interfaces
destraynor
155
24k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
226
22k
Fireside Chat
paigeccino
34
3.1k
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
7
570
It's Worth the Effort
3n
183
28k
How GitHub (no longer) Works
holman
312
140k
The World Runs on Bad Software
bkeepers
PRO
66
11k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
29
960
Site-Speed That Sticks
csswizardry
3
270
Building Flexible Design Systems
yeseniaperezcruz
328
38k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
251
21k
4 Signs Your Business is Dying
shpigford
182
22k
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...