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
280
Featured
See All Featured
Building Applications with DynamoDB
mza
93
6.2k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
175
52k
Code Review Best Practice
trishagee
67
18k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
40
2k
Side Projects
sachag
452
42k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
30
4.6k
Making Projects Easy
brettharned
116
6k
The Straight Up "How To Draw Better" Workshop
denniskardys
232
140k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
30
2.2k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
133
33k
Become a Pro
speakerdeck
PRO
26
5.2k
Done Done
chrislema
182
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...