Native Moduleの作り方 / Creating Native Module in React Native

https://ducklings.connpass.com/event/164844/ の発表資料です。

Transcript

1. Native Module ͷ࡞Γํ React Native Tech Blog meetup#1 2020-02-26
2. About me? • ๺઒ ୡ໵ʢTatsuya KITAGAWAʣ • PAY.JP • https:#//github.com/yatatsu • https:#//twitter.com/tatsuyakit
3. About PAY.JP • https:#//pay.jp/ • γϯϓϧͰΘ͔Γ΍͍͢APIΛఏڙ͢ΔܾࡁαʔϏε • ڝ߹ͷαʔϏεͱͯ͠StripeͳͲ͕͋Γ·͢ • React Native޲͚ͷSDKϓϥάΠϯΛެ։͠·ͨ͠
 http:#//payjp-announce.hatenablog.com/entry/2020/02/14/113211
4. Native Modules? (1/2) • ඪ४Ͱଟ͘ͷωΠςΟϒͷػೳ͕ར༻Ͱ͖Δ • Alert.alert(…)ͰΞϥʔτ͕දࣔ͞ΕΔͱ͔ • ඪ४Ͱ༻ҙ͞Ε͍ͯͳ͍ωΠςΟϒͷػೳΛར༻͍ͨ͠ • ಉ͡Α͏ʹJS͔Βར༻Ͱ͖ΔΑ͏ʹ͢Δ࢓૊Έ
5. Native Modules? (2/2) • react-native-community/react-native-webview • react-native-community/react-native-maps • ϥΠϒϥϦͱͯ͠ఏڙ͞Ε͍ͯΔ΋ͷ͕ଟ਺ • ͜ΕΒΛ࡞Δଆͷ࿩Λ͠·͢
6. CLI tools (1/3) • brodybits/create-react-native-module • react-native-community/bob • frostney/react-native-create-library • peggyrayzis/react-native-create-bridge
7. 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
8. CLI tools (3/3) • `npx create-react-native-module MyLibrary` • ϓϩδΣΫτͷ਽ܗ͕࡞੒͞ΕΔ
9. 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
10. Auto Linking (1/2) • RN 0.60ΑΓಋೖ͞ΕͨAutoLinking • `react-native config`ͰಘΒΕΔ
 ϓϩδΣΫτͷϝλ৘ใΛར༻ͯ͠Link͢Δ • https:#//github.com/react-native-community/ cli/blob/master/docs/autolinking.md
11. Auto Linking (2/2) • σΟϨΫτϦߏ੒͸σϑΥϧτͷconfigʹҰக • *.podspec͕ϓϩδΣΫτ௚Լʹ͋Δ etc. • มߋ͢Δ৔߹͸ react-native.config.js Λ௥Ճ
12. react-native.config.js const path = require('path'); module.exports = { dependency: { platforms: { ios: { podspecPath: path.join(#__dirname, 'ios', 'my.podspec') } } } };
13. tips:1
 Xcode (1/4) • iOSωΠςΟϒͷ։ൃ͢Δͱ͖͸Xcode͕ศར • ͔͠͠ϥΠϒϥϦͷϓϩδΣΫτΛͦͷ··ಡΈࠐΉͱ…
14. tips:1
 Xcode (2/4) • iOSωΠςΟϒͷ։ൃ͢Δͱ͖͸Xcode͕ศར • ͔͠͠ϥΠϒϥϦͷϓϩδΣΫτΛͦͷ··ಡΈࠐΉͱ…
15. tips:1
 Xcode (3/4) • example/ios/example.xcworkspace Λ։͘
 ʢpod install͔ͯ͠Βʣ
16. tips:1
 Android Studio (4/4) • example/android/build.gradle Λ։͘
17. tips:2
 Sync modules (1/2) • ios/ android/ Λมߋͯ͠ • ಈ࡞֬ೝ͸exampleҎԼͰ͓͜ͳ͏ • ຖճ yarn install ͠௚͢ͷ͸͕͔͔࣌ؒΔ
18. 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
19. ·ͱΊ • Native ModuleΛ։ൃ͢Δࡍ͸CLIπʔϧ͕ศར • Xcode΍Android StudioͰ։ൃ͢Δ • ࡉ͔͍։ൃͷTips͸ଞͷOSS͕ࢀߟʹͳΔ • ಛʹ react-native-community ͕๛෋
20. Blog • Native Moduleͷ࡞Γํ - React Native Tech Blog
 https:#//tech.maricuru.com/entry/2020/02/20/052054