React Native Inside - Speaker Deck

Slide 1

Slide 1 text

React Native Inside - Android Edition -

Slide 2

Slide 2 text

React Native ?

Slide 3

Slide 3 text

React Native

Slide 4

Slide 4 text

React Native

Slide 5

Slide 5 text

react-native init AwesomeProject ├── android/ ├── ios ├── index.android.js ├── index.ios.js ├── node_modules/ └── package.json

Slide 6

Slide 6 text

react-native init AwesomeProject

Slide 7

Slide 7 text

Agenda 1. アプリ起動後の処理 2. 仮想DOMの実装 3. ネイティブコード連携箇所の実装

Slide 8

Slide 8 text

1.アプリ起動後の処理

Slide 9

Slide 9 text

● ローカルのサーバーからjsを読み込んで起動 ● jsをその場でリロード可 react-native run android

Slide 10

Slide 10 text

Android Project structure

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

ReactActivity#onCreate 1. ReactActivity#createReactInstanceManager() 2. ReactActivity#createRootView() 3. ReactRootViewr#startReactApplication()

Slide 13

Slide 13 text

ReactActivity#onCreate 1. ReactActivity#createReactInstanceManager() 2. ReactActivity#createRootView() 3. ReactRootViewr#startReactApplication()

Slide 14

Slide 14 text

ReactActivity#createReactInstanceManager() ● DeveloperSupportの有無 ○ (DUBUG実行ではON) ● JSBundle

Slide 15

Slide 15 text

● 開発時にJSBundleをサーバーから配信する機能 DeveloperSupport

Slide 16

Slide 16 text

JSBundleファイル ● Jsをサーバーから取得せず、ファイルとしてアプリに同梱 ● アプリをリリースするときはこっち Running On Device – React Native https://facebook.github.io/react-native/docs/running-on-device-ios.html

Slide 17

Slide 17 text

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 -createReactContext(): ReactApplicationContext

Slide 18

Slide 18 text

初期化処理の大部分が行われる 1. NativeModuleRegistry, JavaScriptModulesConfigの初期化 2. CatalystInstanceの初期化 3. native/jsモジュールの読み込み a. ReactInstanceManagerImpl#processPackage 4. JSBundleの実行 a. catalystInstance.runJSBundle(); (だいぶ省略してます ) ReactInstanceManager#createReactContext

Slide 19

Slide 19 text

CatalystInstance NativeとJSのつなぎ込み ● JSModule, NativeModuleの管理 ● CatalystInstanceImpl +runJSBundle(): void incrementPendingJSCalls

Slide 20

Slide 20 text

CatalystInstance#runJSBundle

Slide 21

Slide 21 text

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

Slide 22

Slide 22 text

MessageQueueThread#callOnQueue

Slide 23

Slide 23 text

再び、ReactActivity#onCreate 1. ReactActivity#createReactInstanceManager() 2. ReactActivity#createRootView() ○ (newしてるだけ) 3. ReactRootViewr#startReactApplication()

Slide 24

Slide 24 text

ReactRootView#startReactApplication mReactInstanceManager.attachMeasuredRootView(this);

Slide 25

Slide 25 text

ReactInstanceManager#attachMeasuredRootViewToInstance catalystInstance.getJSModule(AppRegistry.class).runApplication (jsAppModuleName, appParams);

Slide 26

Slide 26 text

JavaScriptModuleRegistry#getJavaScriptModule

Slide 27

Slide 27 text

Proxy.newProxyInstance java.lang.reflect.Proxy 動的プロキシを作る時に使われるメソッドの処理を動的に変更できる http://qiita. com/obaQ/items/e401d41059d81149da52

Slide 28

Slide 28 text

Libraries/ ● Libraries/ 以下にライブラリのjsファイルが ● こいつらがProxy越しに動的に呼ばれる ※インタフェースのjavaファイルは別途存在する

Slide 29

Slide 29 text

Overview MainActivity ReactActivity ReactInstanceManager ReactRootView ReactApplicationContext CatalystInstance NativeModuleRegistry

Slide 30

Slide 30 text

Oops!!

Slide 31

Slide 31 text

本日はここまで 1. アプリ起動後の処理 2. 仮想DOMの実装次回!! 3. ネイティブコード連携箇所の実装次回!!

Slide 32

Slide 32 text

To be continued...