Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Native modules and ui components

131 views

Published on

Native Modulesの実装時のことや
Native UI Componentの実装時の話

Published in: Technology
  • Be the first to comment

  • Be the first to like this

Native modules and ui components

  1. 1. NativeModuleの実装や ライブラリ導入をした話 【シューマイ】Tech Lead Engineerから最新技術を学べ!ReactNative編 2019/02/27
  2. 2. 自己紹介  大津 穂高  OPEN8 Inc. @14__oz
  3. 3. プロダクト https://video-b.com https://letronc-m.com https://lxtrip.com https://open8.com/business/video-tap
  4. 4. 概要  サードパーティ利用の話  NativeModules作成の話  CustomView作成の話
  5. 5. メリット・デメリット  メリット  自分で用意する手間が省ける  公式でサポートされていないものが利用できる  かっこいいものがある  デメリット  バグを含んでいる可能性がある  更新がされない可能性がある
  6. 6. サードパーティ利用の話  サードパーティ利用の話  NativeModules作成の話  CustomView作成の話
  7. 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となる
  8. 8. react-native-image-picker  事前に空白をなくすようにした  https://developer.android.com/reference/android/webkit/MimeTypeMap
  9. 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. 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’ );
  11. 11. ReproのReactNative対応
  12. 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. 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. 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. 15. CustomView
  16. 16. CustomViewのサイズを可変できない  Android側のrequestLayoutを呼び出してもサイズが変更されない  描画の領域はCustomViewを呼び出す前に決まっているらしい  描画にはLayoutShadowNodeが使われている 参考:https://nicholasmarais1158.github.io/2017/07/React-Native-Custom-Measuring
  17. 17. ReactTextShadowNode ReactTextInputShadowNode LayoutShadowNode ReactBaseTextShadowNode ・・・・・・ ReactShadowNodeImpl Yoga LayoutShadowNode ReactSliderShadowNode ・・・・・・
  18. 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. 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); } }
  20. 20. まとめ  サードーパーティは便利だけど選定は気をつける  Yoga、LayoutShadowNodeを用いてサイズを変更している

×