Native modules and ui components
- 2. 自己紹介 大津 穂高 OPEN8 Inc. @14__oz
- 4. 概要 サードパーティ利用の話 NativeModules作成の話 CustomView作成の話
- 5. メリット・デメリット メリット 自分で用意する手間が省ける 公式でサポートされていないものが利用できる かっこいいものがある デメリット バグを含んでいる可能性がある 更新がされない可能性がある
- 6. サードパーティ利用の話 サードパーティ利用の話 NativeModules作成の話 CustomView作成の話
- 7. react-native-image-picker https://github.com/react-community/react-native-image-picker test_image_react_native.png (空白あり) data:image/pngが取得できる test_image react_native.png (空白なし) nullとなる
- 9. NativeModules作成の話 サードパーティ利用の話 NativeModules作成の話 iOS: https://facebook.github.io/react-native/docs/native-modules-ios Android: https://facebook.github.io/react-native/docs/native-modules-android CustomView作成の話
- 10. Repro JavaJavaScript トラッキング名 ReproModuleComponent @ReactMethod private void customTrack(final String trackEvent) { UiThreadUtil.runOnUiThread(new Runnable() { @Override public void run() { Repro.track(trackEvent); } }); } import { NativeModules } from 'react-native'; NativeModules.ReproAndroid.customTrack( 'CustomTrackName’ );
- 12. 動画の復号 JavaJavaScript 暗号化されたファイルのパス（配列） 復号したファイルのパス CipherModuleVideoComponent @ReactMethod private void getDecryptVideoPaths( String key, String iv, ReadableArray videoPaths, Callback callback ) { try { //復号処理．．． callback.invoke(videoPath); } catch (Exception e) { Bugsnag.notify(e); } }
- 13. コールバックで値を返却した理由 The return type of bridge methods is always void. React Native bridge is asynchronous, so the only way to pass a result to JavaScript is by using callbacks or emitting events (see below). 自作したNativeModuleから値を返却するには、 コールバックかイベント発行となる(iOS/Android) イベントの発行について https://facebook.github.io/react-native/docs/native-modules- android#sending-events-to-javascript
- 14. CustomView作成の話 サードパーティ利用の話 NativeModules作成の話 CustomView作成の話 iOS: https://facebook.github.io/react-native/docs/native-components-ios Android: https://facebook.github.io/react-native/docs/native-components-android
- 15. CustomView
- 16. CustomViewのサイズを可変できない Android側のrequestLayoutを呼び出してもサイズが変更されない 描画の領域はCustomViewを呼び出す前に決まっているらしい 描画にはLayoutShadowNodeが使われている 参考：https://nicholasmarais1158.github.io/2017/07/React-Native-Custom-Measuring
- 18. Yoga Facebookが公開しているクロスプラットフォームのレイアウトエンジン github: https://github.com/facebook/yoga document: https://yogalayout.com/docs ReactNativeのレイアウトエンジンYogaの仕組み 前編: https://blog.engineer.adways.net/entry/2018/08/24/202254 後編: https://blog.engineer.adways.net/entry/2018/08/31/180000 続編: https://blog.engineer.adways.net/entry/2018/09/07/193000
- 19. LayoutShadowNodeの拡張 public class ShadowNode extends LayoutShadowNode implements YogaMeasureFunction { public Integer viewTagToShadowNode = 0; public ShadowNode() { this.setMeasureFunction(this); } @Override public long measure( YogaNode node, float width, YogaMeasureMode widthMode, float height, YogaMeasureMode heightMode) { int yogaWidth = 1080; int yogaHeight = 607; Integer viewWidth = viewToWidth.get(this.viewTagToShadowNode); Integer viewHeight = viewToHeight.get(this.viewTagToShadowNode); if (viewWidth != null && viewHeight != null) { yogaWidth = viewWidth; yogaHeight = viewHeight; } return YogaMeasureOutput.make(yogaWidth, yogaHeight); } }