ネイティブモジュールの作り方 @ React Native Meetup #9 in Japan

* 作ったネイティブモジュールの紹介
* RNが提供しない事がしたい
* モジュールのセットアップ
* プロジェクトのファイル構成
* helloメソッドの定義
* RNからの呼び出し
* 別スレッドで実行
* 単純なお作法に従うだけ
* でも最終手段

Transcript

1. ωΠςΟϒϞδϡʔϧͷ࡞Γํ React Native Meetup #9 By Takuya Matsuyama 2018/09/12
2. TAKUYA craftzdog ϑϦʔϥϯαʔ !2 ࠷ۙ͸ࣗ࡞ΞϓϦͰੜ׆த
3. !3
4. Built on top of React Native !4
5. ࡞ͬͨωΠςΟϒϞδϡʔϧ •react-native-sqlite-2 ‣ ψϧจࣈରԠ
   ͷ
   42-JUF
   ϓϥάΠϯ
   •react-native-japanese-tokenizer ‣ ܰྔͳ೔ຊޠ෼͔ͪॻ͖Ϟδϡʔϧ
   w ͥͻ։ൃͷ͝ࢀߟʹ !5
6. 3/͕ఏڙ͠ͳ͍ࣄ͕͍ͨ͠ wωΠςΟϒಛԽͷ"1*΍ϥΠϒϥϦͷར༻
   ‣ σʔλϕʔεɺը૾ॲཧͳͲ
   wϚϧνεϨουͰͷॲཧ
   ‣ େྔͷσʔλΛ6*ΛϒϩοΫͤͣʹॲཧ !6 ωΠςΟϒϞδϡʔϧͷ ग़൪
7. ϞδϡʔϧͷηοτΞοϓ w react-native-create-library
   Λ࢖͏
   ‣ ඞཁͳϑΝΠϧ͕ࣗಈͰੜ੒͞ΕΔ
   ‣ ࡉ͔͍͜ͱ͸Ұ୴ؾʹ͠ͳ͍͍ͯ͘ !7 $ npm install -g react-native-create-library $ react-native-create-library MyLibrary
8. ϓϩδΣΫτͷϑΝΠϧߏ੒ w ϓϥοτϑΥʔϜ͝ͱʹσΟϨΫτϦ͕༻ҙ͞ΕΔ
   w ରԠ͠ͳ͍΋ͷ͸࡟আͯ͠Α͍ !8 . ├── android/ ├── ios/ ├── windows/ ├── README.md ├── index.js └── package.json 3 directories, 3 files
9. IFMMPϝιουͷఆٛ w ۭͬΆͷϞδϡʔϧ !9 // ios/RNMyLibrary.m #import "RNMyLibrary.h" @implementation RNMyLibrary RCT_EXPORT_MODULE() @end
10. w RCT_EXPORT_METHOD
    ͰϝιουΛΤΫεϙʔτ !10 // ios/RNMyLibrary.m #import "RNMyLibrary.h" @implementation RNMyLibrary RCT_EXPORT_MODULE() RCT_EXPORT_METHOD(hello:(NSString *)name) { RCTLogInfo(@"Hello, %@", name); } @end IFMMPϝιουͷఆٛ
11. IFMMPϝιουͷఆٛ w ۭͬΆͷϞδϡʔϧ !11 // android/src/main/java/com/reactlibrary/RNMyLibraryModule.java package com.reactlibrary; import …; public class RNMyLibraryModule extends ReactContextBaseJavaModule { private final ReactApplicationContext reactContext; public RNMyLibraryModule(ReactApplicationContext reactContext) { super(reactContext); this.reactContext = reactContext; } @Override public String getName() { return "RNMyLibrary"; } }
12. w @ReactMethod
    ͰϝιουΛΤΫεϙʔτ !12 // android/src/main/java/com/reactlibrary/RNMyLibraryModule.java package com.reactlibrary; import …; public class RNMyLibraryModule extends ReactContextBaseJavaModule { private final ReactApplicationContext reactContext; public RNMyLibraryModule(ReactApplicationContext reactContext) { super(reactContext); this.reactContext = reactContext; } @Override public String getName() { return "RNMyLibrary"; } @ReactMethod public void hello(String name) { Log.d("RNMyLibrary", String.format("Hello, %s", name)); } } IFMMPϝιουͷఆٛ
13. IFMMPͷݺͼग़͠ !13 import MyLibrary from 'react-native-my-library' MyLibrary.hello('World')
14. ผεϨουͰ࣮ߦ w ඪ४Ͱϝιου͕࣮ߦ͞ΕΔGCDͷqueueΛࢦఆ
    methodQueue
    w PromiseͰ݁ՌΛฦ͢ !14 - (dispatch_queue_t)methodQueue { return dispatch_queue_create(“my.library", DISPATCH_QUEUE_SERIAL); } RCT_EXPORT_METHOD(doSomething:(NSString *)param resolver:(RCTPromiseResolveBlock)resolve rejecter:(RCTPromiseRejectBlock)reject) { NSArray * result = ...; if (result) { resolve(result); } else { NSError *error = ...; reject(@"my_error", @"Unexpected error", error); } }
15. ผεϨουͰ࣮ߦ w ThreadͱRunnableΛ࢖͏
    w PromiseͰ݁ՌΛฦ͢ !15 @ReactMethod public void doSomething(final String param, final Promise promise) { new Thread(new Runnable() { public void run() { // …… promise.resolve(SOMETHING); } catch (Exception e) { promise.reject(“MY_ERROR", e); } } }).start(); }
16. ݺͼग़͠ w ϝιουͷฦΓ஋͸Promise
    w async/await͕࢖͑Δ !16 async function doIt() { try { var result = await MyLibrary.doSomething('foo'); } catch (e) { console.error(e); } } doIt();
17. ୯७ͳ͓࡞๏ʹै͏͚ͩ w ͋ͱ͸֤ωΠςΟϒͷ஌ࣝɾ΍Γ͍ͨࣄʹΑΔ !17
18. Ͱ΋࠷ऴखஈ wϝϯςφϯε͕௒େม
    ‣ ৗʹJ04ͱ"OESPJEͷ྆ํΛ໘౗ݟΔෛ୲
    ‣ 3/ଆͷ࢓༷มߋ΁ͷରԠ
    ‣ σόοά͕ͣ͠Β͍ !18 RNଆͰͲ͏ͯ͠΋ղܾͰ͖ͳ͍͚࣌ͩ࢖͏