React Native Inside

Transcript

1. React Native Inside - Android Edition -
2. React Native ?
3. React Native
4. React Native
5. react-native init AwesomeProject ├── android/ ├── ios ├── index.android.js ├── index.ios.js ├── node_modules/ └── package.json
6. react-native init AwesomeProject
7. Agenda 1. アプリ起動後の処理 2. 仮想DOMの実装 3. ネイティブコード連携箇所の実装
8. 1.アプリ起動後の処理
9. • ローカルのサーバーからjsを読み込んで起動 • jsをその場でリロード可 react-native run android
10. Android Project structure
11. 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
12. ReactActivity#onCreate 1. ReactActivity#createReactInstanceManager() 2. ReactActivity#createRootView() 3. ReactRootViewr#startReactApplication()
13. ReactActivity#onCreate 1. ReactActivity#createReactInstanceManager() 2. ReactActivity#createRootView() 3. ReactRootViewr#startReactApplication()
14. ReactActivity#createReactInstanceManager() • DeveloperSupportの有無 ◦ (DUBUG実行ではON) • JSBundle
15. • 開発時にJSBundleをサーバーから配信する機能 DeveloperSupport
16. JSBundleファイル • Jsをサーバーから取得せず、ファイルとしてアプリに同梱 • アプリをリリースするときはこっち Running On Device – React Native https://facebook.github.io/react-native/docs/running-on-device-ios.html
17. 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
18. 初期化処理の大部分が行われる 1. NativeModuleRegistry, JavaScriptModulesConfigの初期化 2. CatalystInstanceの初期化 3. native/jsモジュールの読み込み a. ReactInstanceManagerImpl#processPackage 4. JSBundleの実行 a. catalystInstance.runJSBundle(); (だいぶ省略してます ) ReactInstanceManager#createReactContext
19. CatalystInstance NativeとJSのつなぎ込み • JSModule, NativeModuleの管理 • CatalystInstanceImpl +runJSBundle(): void incrementPendingJSCalls
20. CatalystInstance#runJSBundle
21. 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
22. MessageQueueThread#callOnQueue
23. 再び、ReactActivity#onCreate 1. ReactActivity#createReactInstanceManager() 2. ReactActivity#createRootView() ◦ (newしてるだけ) 3. ReactRootViewr#startReactApplication()
24. ReactRootView#startReactApplication mReactInstanceManager.attachMeasuredRootView(this);
25. ReactInstanceManager#attachMeasuredRootViewToInstance catalystInstance.getJSModule(AppRegistry.class).runApplication (jsAppModuleName, appParams);
26. JavaScriptModuleRegistry#getJavaScriptModule
27. Proxy.newProxyInstance java.lang.reflect.Proxy 動的プロキシを作る時に使われる メソッドの処理を動的に変更できる http://qiita. com/obaQ/items/e401d41059d81149da52
28. Libraries/ • Libraries/ 以下にライブラリのjsファイルが • こいつらがProxy越しに動的に呼ばれる ※インタフェースのjavaファイルは別途存在する
29. Overview MainActivity ReactActivity ReactInstanceManager ReactRootView ReactApplicationContext CatalystInstance NativeModuleRegistry
30. Oops!!
31. 本日はここまで 1. アプリ起動後の処理 2. 仮想DOMの実装 次回!! 3. ネイティブコード連携箇所の実装 次回!!
32. To be continued...