Blogこの広告は、90日以上更新していないブログに表示しています。Androidこんにちは。アプリエンジニアの原です。テックブログ始めました。一発目はReactNativeの記事です。巷で話題のReactNative、最近弊社のネイティブアプリをReactNative化するプロジェクトがスタートしています。ReactNativeはロジック部分をJavascriptで、Viewの部分をJavascriptのライブラリのReactで書くことができ、実行時はReactで書いたソースからiOS/AndroidのネイティブコードのViewに変換してくれます。実際にReactNativeのコードからどのようなViewに変換されてるでしょうか。ソースを読むのも1つの手ですが、AndroidSDKにはAndroidDeviceMonitorというツールがありViewツリーをGUIで確認できる機能があります。このツールを使うことでViewの構造を簡単に確認することが出来ますので今回をこれを使って見てみます。新規プロジェクトを作成ReactNativeとAndroidSDKの設定はできてい前提で進めていきます。run-androidでアンドロイドのビルドが走ります。run-android新規のプロジェクトだと下記のような画面になります。Javascript側のView構造は下記のようになっています。AnectSample1);render()メソッドがViewを返します。Viewの中にTextが3つ入っている構造です。AndroidDeviceMonitorで確認このViewをAndroidDeviceMonitorで確認してみます。monitorパスが通っていない場合はAndroid/SDK/toolsの中にあります。AndroidDeviceMonitorが起動したら下図の赤丸の部分をおしてHierarchyViewを選択します。左側のナビゲーションのwindowsから作成したアプリを選択すると下記の図のようにViewの構造が表示されます。変換されたViewを探す一番左がルートのViewになり階層順に右に並んでいます。Native」を表示していることがわかります。同様に残り2つのReactTextViewもJavascript側で書いたテキストを表示していることがわかりました。このことからJavascript側のTextクラスがAndroid側ではReactTextViewというViewとに変換されているということが確認できました。これらを子Viewに持つReactViewGroupがJavascript側のViewクラスが変換されたものだということもわかり、Javascriptで定義したすべてのViewがネイティブのコードに変換されていることが確認できました。まとめRectNativeで作成したアプリをAndroidDeviceMonitorでViewの構造を調べました。Javascript側のViewがAndroid側のネイティブのViewとしてちゃんと変換されていることがわかりました。実際の実装で頻繁に使うことは無いと思いますが、ReactNativeのコンポーネントがネイティブでどう変換されているかを知ることは実装やデバッグに役に立つこともあるかと思いますので機会があれば使ってみてください。ReactNativeにトライしてみた前回でKotlinJSの使い方がチョットだけわかったので、ReactNati...2017-12-06KotlinJSを動かすエンジニアの原です。先日Kotlin1.2がリリースされました。Worldエンジニアの原です。今日はReactXPで遊んでみます。ReactXP...2017-07-28新しい技術導入に関する勉強会で発表してきましたエンジニアの原です。World月別アーカイブ参加グループプログラミングはてなブログをはじめよう!anectさんは、はてなブログを使っています。ブログを報告するスターをつけました引用をストックしましたストック一覧を見る閉じる引用するにはまずログインしてくださいログイン閉じる引用をストックできませんでした。再度お試しください閉じる限定公開記事のため引用できません。