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

1. NativeModuleの実装や
ライブラリ導入をした話
【シューマイ】Tech Lead Engineerから最新技術を学べ！ReactNative編 2019/02/27

2. 自己紹介
 大津 穂高
 OPEN8 Inc.
@14__oz

3. プロダクト
https://video-b.com
https://letronc-m.com https://lxtrip.com
https://open8.com/business/video-tap

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となる

8. react-native-image-picker
 事前に空白をなくすようにした
 https://developer.android.com/reference/android/webkit/MimeTypeMap

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’
);

11. ReproのReactNative対応

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

17. ReactTextShadowNode ReactTextInputShadowNode
LayoutShadowNode
ReactBaseTextShadowNode
・・・・・・
ReactShadowNodeImpl
Yoga
LayoutShadowNode
ReactSliderShadowNode ・・・・・・

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);
}
}

20. まとめ
 サードーパーティは便利だけど選定は気をつける
 Yoga、LayoutShadowNodeを用いてサイズを変更している