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

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