Slide 1
Slide 1 text
ωΠςΟϒϞδϡʔϧͷ࡞Γํ
React Native Meetup #9
By Takuya Matsuyama
2018/09/12
Slide 2
Slide 2 text
TAKUYA
craftzdog
ϑϦʔϥϯαʔ
!2
࠷ۙࣗ࡞ΞϓϦͰੜ׆த
Slide 3
Slide 3 text
!3
Slide 4
Slide 4 text
Built on top of React Native
!4
Slide 5
Slide 5 text
࡞ͬͨωΠςΟϒϞδϡʔϧ
•react-native-sqlite-2
‣ ψϧจࣈରԠͷ42-JUFϓϥάΠϯ
•react-native-japanese-tokenizer
‣ ܰྔͳຊޠ͔ͪॻ͖Ϟδϡʔϧ
w ͥͻ։ൃͷ͝ࢀߟʹ
!5
Slide 6
Slide 6 text
3/͕ఏڙ͠ͳ͍ࣄ͕͍ͨ͠
wωΠςΟϒಛԽͷ"1*ϥΠϒϥϦͷར༻
‣ σʔλϕʔεɺը૾ॲཧͳͲ
wϚϧνεϨουͰͷॲཧ
‣ େྔͷσʔλΛ6*ΛϒϩοΫͤͣʹॲཧ
!6
ωΠςΟϒϞδϡʔϧͷ
ग़൪
Slide 7
Slide 7 text
ϞδϡʔϧͷηοτΞοϓ
w react-native-create-libraryΛ͏
‣ ඞཁͳϑΝΠϧ͕ࣗಈͰੜ͞ΕΔ
‣ ࡉ͔͍͜ͱҰ୴ؾʹ͠ͳ͍͍ͯ͘
!7
$ npm install -g react-native-create-library
$ react-native-create-library MyLibrary
Slide 8
Slide 8 text
ϓϩδΣΫτͷϑΝΠϧߏ
w ϓϥοτϑΥʔϜ͝ͱʹσΟϨΫτϦ͕༻ҙ͞ΕΔ
w ରԠ͠ͳ͍ͷআͯ͠Α͍
!8
.
├── android/
├── ios/
├── windows/
├── README.md
├── index.js
└── package.json
3 directories, 3 files
Slide 9
Slide 9 text
IFMMPϝιουͷఆٛ
w ۭͬΆͷϞδϡʔϧ
!9
// ios/RNMyLibrary.m
#import "RNMyLibrary.h"
@implementation RNMyLibrary
RCT_EXPORT_MODULE()
@end
Slide 10
Slide 10 text
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ϝιουͷఆٛ
Slide 11
Slide 11 text
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";
}
}
Slide 12
Slide 12 text
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ϝιουͷఆٛ
Slide 13
Slide 13 text
IFMMPͷݺͼग़͠
!13
import MyLibrary from 'react-native-my-library'
MyLibrary.hello('World')
Slide 14
Slide 14 text
ผεϨουͰ࣮ߦ
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);
}
}
Slide 15
Slide 15 text
ผεϨουͰ࣮ߦ
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();
}
Slide 16
Slide 16 text
ݺͼग़͠
w ϝιουͷฦΓPromise
w async/await͕͑Δ
!16
async function doIt() {
try {
var result = await MyLibrary.doSomething('foo');
} catch (e) {
console.error(e);
}
}
doIt();
Slide 17
Slide 17 text
୯७ͳ͓࡞๏ʹै͏͚ͩ
w ͋ͱ֤ωΠςΟϒͷࣝɾΓ͍ͨࣄʹΑΔ
!17
Slide 18
Slide 18 text
Ͱ࠷ऴखஈ
wϝϯςφϯε͕େม
‣ ৗʹJ04ͱ"OESPJEͷ྆ํΛ໘ݟΔෛ୲
‣ 3/ଆͷ༷มߋͷରԠ
‣ σόοά͕ͣ͠Β͍
!18
RNଆͰͲ͏ͯ͠ղܾͰ͖ͳ͍͚࣌ͩ͏