Slide 1

Slide 1 text

Native Module ͷ࡞Γํ React Native Tech Blog meetup#1 2020-02-26

Slide 2

Slide 2 text

About me? • ๺઒ ୡ໵ʢTatsuya KITAGAWAʣ • PAY.JP • https:#//github.com/yatatsu • https:#//twitter.com/tatsuyakit

Slide 3

Slide 3 text

About PAY.JP • https:#//pay.jp/ • γϯϓϧͰΘ͔Γ΍͍͢APIΛఏڙ͢ΔܾࡁαʔϏε • ڝ߹ͷαʔϏεͱͯ͠StripeͳͲ͕͋Γ·͢ • React Native޲͚ͷSDKϓϥάΠϯΛެ։͠·ͨ͠
 http:#//payjp-announce.hatenablog.com/entry/2020/02/14/113211

Slide 4

Slide 4 text

Native Modules? (1/2) • ඪ४Ͱଟ͘ͷωΠςΟϒͷػೳ͕ར༻Ͱ͖Δ • Alert.alert(…)ͰΞϥʔτ͕දࣔ͞ΕΔͱ͔ • ඪ४Ͱ༻ҙ͞Ε͍ͯͳ͍ωΠςΟϒͷػೳΛར༻͍ͨ͠ • ಉ͡Α͏ʹJS͔Βར༻Ͱ͖ΔΑ͏ʹ͢Δ࢓૊Έ

Slide 5

Slide 5 text

Native Modules? (2/2) • react-native-community/react-native-webview • react-native-community/react-native-maps • ϥΠϒϥϦͱͯ͠ఏڙ͞Ε͍ͯΔ΋ͷ͕ଟ਺ • ͜ΕΒΛ࡞Δଆͷ࿩Λ͠·͢

Slide 6

Slide 6 text

CLI tools (1/3) • brodybits/create-react-native-module • react-native-community/bob • frostney/react-native-create-library • peggyrayzis/react-native-create-bridge

Slide 7

Slide 7 text

CLI tools (2/3) • ެࣜυΩϡϝϯτͰ͸create-react-native-module • “To get set up with the basic project structure for a native module we will use a third party tool 
 create-react-native-module” • ͓͢͢Ί͸࠷খݶͷߏ੒͕΄͍͠ͳΒ
 "-> create-react-native-module • Linter΍FormatterͳͲͷॳظઃఆ·Ͱ͓·͔ͤ
 "-> react-native-community/bob

Slide 8

Slide 8 text

CLI tools (3/3) • `npx create-react-native-module MyLibrary` • ϓϩδΣΫτͷ਽ܗ͕࡞੒͞ΕΔ

Slide 9

Slide 9 text

react-native-my-library/ "## README.md "## android $ "## README.md $ "## build.gradle $ &## src $ &## main $ "## AndroidManifest.xml $ &## java $ &## com $ &## reactlibrary $ "## MyLibraryModule.java $ &## MyLibraryPackage.java "## index.js "## ios $ "## MyLibrary.h $ "## MyLibrary.m $ "## MyLibrary.xcodeproj $ $ &## project.pbxproj $ &## MyLibrary.xcworkspace $ &## contents.xcworkspacedata "## package.json &## react-native-my-library.podspec

Slide 10

Slide 10 text

Auto Linking (1/2) • RN 0.60ΑΓಋೖ͞ΕͨAutoLinking • `react-native config`ͰಘΒΕΔ
 ϓϩδΣΫτͷϝλ৘ใΛར༻ͯ͠Link͢Δ • https:#//github.com/react-native-community/ cli/blob/master/docs/autolinking.md

Slide 11

Slide 11 text

Auto Linking (2/2) • σΟϨΫτϦߏ੒͸σϑΥϧτͷconfigʹҰக • *.podspec͕ϓϩδΣΫτ௚Լʹ͋Δ etc. • มߋ͢Δ৔߹͸ react-native.config.js Λ௥Ճ

Slide 12

Slide 12 text

react-native.config.js const path = require('path'); module.exports = { dependency: { platforms: { ios: { podspecPath: path.join(#__dirname, 'ios', 'my.podspec') } } } };

Slide 13

Slide 13 text

tips:1
 Xcode (1/4) • iOSωΠςΟϒͷ։ൃ͢Δͱ͖͸Xcode͕ศར • ͔͠͠ϥΠϒϥϦͷϓϩδΣΫτΛͦͷ··ಡΈࠐΉͱ…

Slide 14

Slide 14 text

tips:1
 Xcode (2/4) • iOSωΠςΟϒͷ։ൃ͢Δͱ͖͸Xcode͕ศར • ͔͠͠ϥΠϒϥϦͷϓϩδΣΫτΛͦͷ··ಡΈࠐΉͱ…

Slide 15

Slide 15 text

tips:1
 Xcode (3/4) • example/ios/example.xcworkspace Λ։͘
 ʢpod install͔ͯ͠Βʣ

Slide 16

Slide 16 text

tips:1
 Android Studio (4/4) • example/android/build.gradle Λ։͘

Slide 17

Slide 17 text

tips:2
 Sync modules (1/2) • ios/ android/ Λมߋͯ͠ • ಈ࡞֬ೝ͸exampleҎԼͰ͓͜ͳ͏ • ຖճ yarn install ͠௚͢ͷ͸͕͔͔࣌ؒΔ

Slide 18

Slide 18 text

tips:2
 Sync modules (2/2) "scripts": { "dev-sync": "cp -r *podspec android ios example/ node_modules/react-native-my-library/“ }, • ର৅ͷίʔυ͚ͩࠩ͠ସ͑Δ • react-native-community/react-native-share

Slide 19

Slide 19 text

·ͱΊ • Native ModuleΛ։ൃ͢Δࡍ͸CLIπʔϧ͕ศར • Xcode΍Android StudioͰ։ൃ͢Δ • ࡉ͔͍։ൃͷTips͸ଞͷOSS͕ࢀߟʹͳΔ • ಛʹ react-native-community ͕๛෋

Slide 20

Slide 20 text

Blog • Native Moduleͷ࡞Γํ - React Native Tech Blog
 https:#//tech.maricuru.com/entry/2020/02/20/052054