࠷ޙͷωΠςΟϒɾϞδϡʔϧ Jamie Birch δΣΠϛʔ ό ʔ ν ໊ බ 

ݱࡏɺωΠςΟϒɾϞδϡʔϧ͸࡞ΓͮΒ͍ TurboModulesGuide ├── MyApp └── RTNCalculator ├── android │ ├── build.gradle │ └── src │ └── main │ └── java │ └── com │ └── rtncalculator │ ├── CalculatorPackage.java │ └── CalculatorModule.java │ │ ├── generated ├── ios │ ├── RTNCalculator.h │ └── RTNCalculator.mm ├── js │ └── NativeCalculator.ts ├── package.json └── rtn-calculator.podspec #import "RTNCalculatorSpec.h" #import "RTNCalculator.h" @implementation RTNCalculator RCT_EXPORT_MODULE() - (void)add:(double)a b:(double)b resolve:(RCTPromiseResolveBlock)resolve reject: (RCTPromiseRejectBlock)reject { NSNumber *result = [[NSNumber alloc] initWithInteger:a+b]; resolve(result); } - (std::shared_ptr)getTurboModule: (const facebook::react::ObjCTurboModule::InitParams &)params { return std::make_shared(params); } @end package com.rtncalculator import com.facebook.react.bridge.Promise import com.facebook.react.bridge.ReactApplicationContext import com.rtncalculator.NativeCalculatorSpec class CalculatorModule(reactContext: ReactApplicationContext) : NativeCalculatorSpec(reactContext) { override fun getName() = NAME override fun add(a: Double, b: Double, promise: Promise) { promise.resolve(a + b) } companion object { const val NAME = "RTNCalculator" } } 

ΑΓ؆୯ͳωΠςΟϒAPIΛ ݺͼग़͢ํ๏͸͋ΔͷͩΖ͏͔ʁ 

౤Ө ϓϩδΣΫγϣϯ 

ϓϩδΣΫγϣϯͱ͸ SDKͷશAPIΛҟݴޠʹ ެ։͢Δ͜ͱ iOS SDK JavaScript 

UIApplication.sharedApplication.openURLOptionsCompletionHandler( NSURL.URLWithString("tel://0120-838-204"), {}, (success) => console.log(success), ); [ [UIApplication sharedApplication] openURL:[NSURL URLWithString:@"tel://0120-838-204"] options:@{} completionHandler:^(BOOL success) { NSLog(@"%d", success); } ]; Objective-C JavaScript ϓϩδΣΫγϣϯͷྗ 

΋ͬͱ࢖͍΍͍͢ʂ . └── telephone.js import { Platform } from 'react-native'; export function dial(phoneNumber) { switch(Platform.OS){ case "ios": UIApplication.sharedApplication.openURLOptionsCompletionHandler( NSURL.URLWithString(`tel://${phoneNumber}`), {}, (success) => console.log(success), ); break; case "android": Application.android.foregroundActivity.startActivity( new android.content.Intent( android.content.Intent.ACTION_DIAL, android.net.Uri.parse(`tel:${phoneNumber}`), ) ); break; } } 

Ͳ͏΍ͬͯϓϩδΣΫγϣϯΛ ૷උͰ͖Δͷ͔ʁ 

ϓϩδΣΫγϣϯΛ૷උ͢Δํ๏ • NativeScript͸ϓϩδΣΫγϣϯͷҰྫ • ৽ܕͷNativeScript͸Node-APIϕʔεͷ΋ͷ… • …ͳͷͰɺNode-APIରԠ͢Δ؀ڥͰ׆ಈͰ͖Δʂ • Hermes͸Node-APIΛରԠ͠ͳ͍͕… • …MicrosoftͷHermesͷϑΥʔΫ͸ରԠ͢Δʂ • ߹Θͤͯɺ૷උͰ͖Δʂ" 

σϞ 

σϞ ᶃ ॆిΛ֬ೝ͢Δ import { useEffect, useState } from "react"; import { StyleSheet, Text, View } from "react-native"; export default function App() { const [batteryLevel, setBatteryLevel] = useState(-1); useEffect(() => { setBatteryLevel(UIDevice.currentDevice.batteryLevel); }, []); return ( ॆిɿ {batteryLevel * 100}% ); } const styles = StyleSheet.create({ container: { flex: 1, alignItems: "center", justifyContent: "center", }, }); 

σϞ ᶄ ωΠςΟϒɾσʔλɾϩΪϯά import { useEffect } from "react"; import { View } from "react-native"; export default function App() { useEffect(() => { const rootView = UIApplication.sharedApplication.keyWindow.rootViewController.view; console.log(rootView.debugDescription); }, []); return ; } LOG ; layer = > 

σϞ ᶅ ϏϡʔͷόοΫάϥ΢ϯυɾΧϥʔΛมߋ͢Δ import { Button, View, StyleSheet } from "react-native"; export default function App() { return ( { const rootView = UIApplication.sharedApplication.keyWindow.rootViewController.view; rootView.backgroundColor = UIColor.systemMintColor; }} /> ); } const styles = StyleSheet.create({ container: { flex: 1, alignItems: "center", justifyContent: "center", }, }); 

వΊΔ • ݱࡏͷωΠςΟϒɾϞδϡʔϧ͸࡞ΓͮΒ͍ • ϓϩδΣΫγϣϯ͸ٹੈओ • NativeScript͸ϓϩδΣΫγϣϯͷ࣮૷ͷҰྫ • ͨͩɺࠓͷͱ͜ΖɺNode-APIΛରԠ͢Δ؀ڥ͕ඞཁ • ͱΓ͋͑ͣMicrosoftͷHermesͷϑΥʔΫͰ࣮ݱͰ͖Δ • MetaͷHermesͰ࢖͑ΔΑ͏ʹͳͬͨΒɺใࠂ͢Δʂ 

ϓϩϑΟʔϧ ౦ژ ͷ΢ΣϒɾΤϯδχΞ @birch_js @shirakaba ͝ਗ਼ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠ʂ Jamie Birch δΣΠϛʔ ό ʔ ν ໊ බ