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

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

42df16a50ca7bc63507e17f07b711701?s=128

Tatsuya Kitagawa

February 26, 2020
Tweet

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