ハイブリッドなReact NativeアプリをKotlin MPPでﾁｮｯﾄ良くする

集まれKotlin好き！Kotlin愛好会 vol.21のLT資料です

https://love-kotlin.connpass.com/event/173821/
識別番号44(開発中のMastodonクライアント): https://github.com/subroh0508/ID44

Transcript

1. ϋΠϒϦουͳ3FBDU
   /BUJWFΞϓϦΛ
   ,PUMJO
   .11ͰŧŔŕŪྑ͘͢Δ 
   ,PUMJOѪ޷ձ
   WPM
   ʹ͜͠Γ͞ͿΖʙ
   !TVCSPI@
2. "CPVU
   .F ʹ͜͠Γ͞ͿΖʙ
   ✦౦ژ౎ɾҏ౾େౡग़਎
   ✦גࣜձࣾ#FBS5BJM
   ‣ "OESPJEΤϯδχΞ ,PUMJO+BWB ˑ
   ‣ 8FCΤϯδχΞ 3BJMT3FBDU ݄ʹొஃ༧ఆͩͬͨTIJCVZBBQLͷڙཆొஃͰ͢
3. 1SPMPHVF 3FBDU
   /BUJWFͰ
   "OESPJEΞϓϦ࡞͍ͬͯΔਓʔʂ
4. 1SPMPHVF 3FBDU
   /BUJWF
   
   /BUJWF
   .PEVMFͰ
   "OESPJEΞϓϦ࡞͍ͬͯΔਓʔʂ ˠϋΠϒϦοτߏ੒
5. "HFOEB ˑ3FBDU
   /BUJWF
   
   ,PUMJO
   .11ͰϩδοΫͱ6*ͷ׬શͳڞ௨ԽΛເʹ
   ɹϚϧνϓϥοτϑΥʔϜରԠͷΞϓϦΛ։ൃத
   ˠ3FBDU
   /BUJWF
   
   ,PUMJO
   .11
   PO
   "OESPJEͷσʔλΫϥεڞ௨Խͷ஌ݟ
   ˠʮએݴత6*ͳΒ+FUQBDL
   $PNQPTFͰʜʯ͸͜ͷ෼͚ͩ
   ๻΋ۀ຿Ͱ͸3FBDU
   /BUJWF৮ͬͯͳ͍ͬ͢
6. 3FBDU
   /BUJWF
   
   /BUJWF
   .PEVMF 3FBDU
   /BUJWF
   w +BWB4DSJQU
   
   3FBDUKTͰ/BUJWFϞόΠϧΞϓϦΛ࡞ΕΔϑϨʔϜϫʔΫ
   w ωΠςΟϒίʔυͰ࣮૷͞ΕͨϞδϡʔϧ΋ݺͼग़͠Մೳʂ
   w "OESPJE
   ,PUMJO+BWBɹɹJ04
   4XJGU0CKFDUJWF$
   w ϋΠϒϦουʹ͢ΔͱԿ͕خ͍͔͠ˠলུ
   w ࢀߟ
   ʮ3FBDU
   /BUJWFͱ&YQPΛ༻͍ͨΫϩεϓϥοτϑΥʔϜ։ൃೖ໳ʯ
   !%SPJE,BJHJ
   
   %BZ ผ్Ϋϥεఆ͕ٛඞཁ
7. ྫ
   5PBTUͷදࣔ<,PUMJO>
   w class ToastModule( context: ReactApplicationContext ) : ReactContextBaseJavaModule(context) { override fun getName() = "ToastExample" @ReactMethod fun show(message: String) { Toast.makeText( reactApplicationContext, message, Toast.LENGTH_SHORT ).show() } } 3FBDU$POUFYU#BTF+BWB.PEVMFΛ ܧঝ HFU/BNF ϝιουΛ
   ΦʔόʔϥΠυ !3FBDU.FUIPEΛ͚ͭͨ
   ϝιουʹ࣮ߦ͍ͨ͠ॲཧΛهड़
8. ྫ
   5PBTUͷදࣔ<+BWBTDSJQU>
   w // ToastExample.js import { NativeModules } from 'react-native'; module.exports = NativeModules.ToastExample; // app.js import { ToastExample } from './ToastExample'; ToastExample.show('In The Name Of。 ...LOVE?'); HFU/BNF Ͱࢦఆͨ͠
   ໊લͰΞΫηεͰ͖Δ !3FBDU.FUIPEΛ͚ͭͨ
   ϝιουΛ+4͔Βݺ΂Δ ͔͠͠େ͖ͳ໰୊͕ʜ ɾТɾʆ ˞1SPNJTFΛ࢖͑͹
   ɹඇಉظॲཧʹ΋ରԠ
9. ໰୊
   !3FBDU.FUIPEͷϝιουʹ౉ͤΔҾ਺ʹ੍ݶ͕͋Δʂ
   w ˑϓϦϛςΟϒܕ
   ˑ.BQ
   ˑ"SSBZ ˑEBUB
   DMBTTΛ౉͍ͨ͠ʂ
   ˠ.BQʹม׵
   ˠ+40/ 4USJOH ʹม׵
   ˠ+4ͰͷσγϦΞϥΠζ࣌
   ৘ใͷܽམ͕ൃੜ͢Δʂ
10. ྫ
    "1*Ϩεϙϯεͷ੒൱ͱϝοηʔδจࣈྻΛ࣋ͭEBUB
    DMBTT
    w data class Response( val isSuccessful: Boolean, val successMessage: String, val errorMessage: String ) { fun message() = if (isSuccessful) successMessage else errorMessage fun toMap(): ReadableMap = ... } @ReactMethod fun fetch(promise: Promise) { val res: Response = client.get(...) promise.resolve(res.toMap()) } 3FTQPOTFܕͷ஋Λ
    ඇಉظతʹฦ͢ϝιου JT4VDDFTTGVMʹΑͬͯ
    ฦΓ஋͕มΘΔNFTTBHFϝιου
11. ྫ
    GFUDIϝιουΛ+4͔Βݺͼग़͢ͱʜ
    w import { FetchExample } from './FetchExample'; const res = await FetchExample.fetch(); console.log(res); // -> { // isSuccessful: true, // successMessage: 'Success :)', // errorMessage: 'Error :(' // } SFT͸ͨͩͷ+4ͷ0CKFDU
    NFTTBHFϝιου͕ݺ΂ͳ͍ʂ ˠ,PUMJOͰ࣮૷ͨ͠ϩδοΫΛ
    ɹ΋͏Ұ౓+4Ͱॻ͘ͷ͸ආ͚͍ͨʜ ͍͍ղܾ๏ɺ͋ΔΜ΍Ͱʜ
12. 4PMVUJPO ,PUMJO
    .11
    
    LPUMJOYTFSJBMJ[FSͰղܾʂ
    w EBUB
    DMBTTΛDPNNPO.BJOσΟϨΫτϦҎԼʹ഑ஔ
    ˠ+7.ɾ+4޲͚ʹϏϧυ
    ˠ/BUJWF
    .PEVMFͱ3FBDUͷ྆ํͰEBUB
    DMBTTΛѻ͑ΔΑ͏ʹʂ
    w LPUMJOYTFSJBMJ[FSΛ࢖ͬͯγϦΞϥΠζɾσγϦΞϥΠζ
    ˠ,PUMJO
    .11ରԠͷγϦΞϥΠζϥΠϒϥϦ
    ˠ+40/ม׵
    PS
    .BQม׵ .BQQFSNBQ 
    
    .BQQFSVNNBQ  ࢀߟ
    IUUQTHJUIVCDPN,PUMJOLPUMJOYTFSJBMJ[BUJPOCMPCNBTUFSEPDTSVOUJNF@VTBHFNENBQQFS
13. 4PMVUJPO ࣮ࡍʹ࢖͍ͬͯΔՕॴ +4 /BUJWF
    .PEVMF͔Β΍͖ͬͯͨ஋Λ
    LPUMJOYTFSJBMJ[BUJPOͰσγϦΞϥΠζ ,PUMJOͰఆٛͨ͠$VTUPN
    (FUUFSΛ
    3FBDUͰݺͼग़͠
14. $PODMVTJPO w 3FBDU
    /BUJWF
    
    /BUJWF
    .PEVMFͳΞϓϦΛ,PUMJO
    .11ͰŧŔŕŪྑͨ͘͠
    w ʮσʔλΫϥεͷڞ௨ԽʯʮϩδοΫͷڞ௨ԽʯͷԸܙΛ࣮ײ͠΍͍͢
    w ,PUMJOͷ๛෋ͳදݱྗΛ+4ͷੈքʹ࣋ͪࠐΉ͜ͱ͕Ͱ͖Δʂ
    w ݱঢ়ɺ༗༻ੑ͕ݟ͑ͨͷ͸"OESPJEͷΈ J048FCͷݕূ͸͜Ε͔Β
    w ϋΠϒϦουߏ੒ΞϓϦͰ೰ΜͰ͍Δਓͷॿ͚ʹʜͳΔͱ͍͍ͳʜ ˠ,PUMJO
    .11͕໨ࢦ͢ੈք؍
15. $. ˑ3FBDU
    /BUJWF
    
    ,PUMJO
    .11ͰϩδοΫͱ6*ͷ׬શͳڞ௨ԽΛເʹ
    ɹϚϧνϓϥοτϑΥʔϜରԠͷ.BTUPEPOΫϥΠΞϯτΞϓϦΛ։ൃதʂ
    (JU)VC
    IUUQTHJUIVCDPNTVCSPI*%
    ϓϥοτϑΥʔϜ ༧ఆ 
    "OESPJEJ04&MFDUSPO
    ϋΠϒϦοτߏ੒ͷࢀߟʹʂ
    ஌ݟ͋Δํ͔Βͷποίϛ׻ܴʂ 5IBOL
    GPS
    MJTUFOJOH