Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Speaker Deck
PRO
Sign in
Sign up for free
Native Moduleの作り方 / Creating Native Module in React Native
Tatsuya Kitagawa
February 26, 2020
Programming
2
370
Native Moduleの作り方 / Creating Native Module in React Native
https://ducklings.connpass.com/event/164844/
の発表資料です。
Tatsuya Kitagawa
February 26, 2020
Tweet
Share
More Decks by Tatsuya Kitagawa
See All by Tatsuya Kitagawa
LiveData with RxJava2
yatatsu
0
640
Other Decks in Programming
See All in Programming
模組化的Swift架構(二) DDD速成
haifengkao
0
390
CakePHPの内部実装 から理解するPSR-7
boro1234
0
260
Improving Developer Experience Through Tools and Techniques 2022
krzysztofzablocki
0
1.2k
Jetpack Compose best practices 動画紹介 @GoogleI/O LT会
takakitojo
0
400
GoogleI/O2022 LT報告会資料
shinsukefujita1126
0
410
Web API連携でCSRF対策がどう実装されてるか調べた / how to implements csrf-detection on Web API
yasuakiomokawa
2
510
Beyond Micro Frontends: Frontend Moduliths for the Enterprise @wad2022
manfredsteyer
PRO
0
140
#JJUG_CCC 「サポート」は製品開発? - JDBCライブラリ屋さんが実践する攻めのテクニカルサポートとJavaエンジニアのキャリアについて -
cdataj
0
430
無限スクロールビューライブラリ 二つの設計思想比較
harumak
0
270
LINE Messaging APIの概要 - LINE API総復習シリーズ
uezo
1
190
Cybozu GoogleI/O 2022 LT会 - Input for all screens
jaewgwon
0
400
Imperative is dead, long live Declarative! | Appdevcon
prof18
0
120
Featured
See All Featured
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
19
1.4k
Optimizing for Happiness
mojombo
365
63k
The Straight Up "How To Draw Better" Workshop
denniskardys
225
120k
Principles of Awesome APIs and How to Build Them.
keavy
113
15k
The World Runs on Bad Software
bkeepers
PRO
57
5.3k
A designer walks into a library…
pauljervisheath
196
16k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
269
12k
The Brand Is Dead. Long Live the Brand.
mthomps
46
2.7k
Writing Fast Ruby
sferik
612
57k
The Power of CSS Pseudo Elements
geoffreycrofte
47
3.9k
Design by the Numbers
sachag
271
17k
Become a Pro
speakerdeck
PRO
3
850
Transcript
Native Module ͷ࡞Γํ React Native Tech Blog meetup#1 2020-02-26
About me? • ୡʢTatsuya KITAGAWAʣ • PAY.JP • https:#//github.com/yatatsu
• https:#//twitter.com/tatsuyakit
About PAY.JP • https:#//pay.jp/ • γϯϓϧͰΘ͔Γ͍͢APIΛఏڙ͢ΔܾࡁαʔϏε • ڝ߹ͷαʔϏεͱͯ͠StripeͳͲ͕͋Γ·͢ • React
Native͚ͷSDKϓϥάΠϯΛެ։͠·ͨ͠ http:#//payjp-announce.hatenablog.com/entry/2020/02/14/113211
Native Modules? (1/2) • ඪ४Ͱଟ͘ͷωΠςΟϒͷػೳ͕ར༻Ͱ͖Δ • Alert.alert(…)ͰΞϥʔτ͕දࣔ͞ΕΔͱ͔ • ඪ४Ͱ༻ҙ͞Ε͍ͯͳ͍ωΠςΟϒͷػೳΛར༻͍ͨ͠ •
ಉ͡Α͏ʹJS͔Βར༻Ͱ͖ΔΑ͏ʹ͢ΔΈ
Native Modules? (2/2) • react-native-community/react-native-webview • react-native-community/react-native-maps • ϥΠϒϥϦͱͯ͠ఏڙ͞Ε͍ͯΔͷ͕ଟ •
͜ΕΒΛ࡞ΔଆͷΛ͠·͢
CLI tools (1/3) • brodybits/create-react-native-module • react-native-community/bob • frostney/react-native-create-library •
peggyrayzis/react-native-create-bridge
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 • LinterFormatterͳͲͷॳظઃఆ·Ͱ͓·͔ͤ "-> react-native-community/bob
CLI tools (3/3) • `npx create-react-native-module MyLibrary` • ϓϩδΣΫτͷܗ͕࡞͞ΕΔ
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
Auto Linking (1/2) • RN 0.60ΑΓಋೖ͞ΕͨAutoLinking • `react-native config`ͰಘΒΕΔ ϓϩδΣΫτͷϝλใΛར༻ͯ͠Link͢Δ
• https:#//github.com/react-native-community/ cli/blob/master/docs/autolinking.md
Auto Linking (2/2) • σΟϨΫτϦߏσϑΥϧτͷconfigʹҰக • *.podspec͕ϓϩδΣΫτԼʹ͋Δ etc. • มߋ͢Δ߹
react-native.config.js ΛՃ
react-native.config.js const path = require('path'); module.exports = { dependency: {
platforms: { ios: { podspecPath: path.join(#__dirname, 'ios', 'my.podspec') } } } };
tips:1 Xcode (1/4) • iOSωΠςΟϒͷ։ൃ͢Δͱ͖Xcode͕ศར • ͔͠͠ϥΠϒϥϦͷϓϩδΣΫτΛͦͷ··ಡΈࠐΉͱ…
tips:1 Xcode (2/4) • iOSωΠςΟϒͷ։ൃ͢Δͱ͖Xcode͕ศར • ͔͠͠ϥΠϒϥϦͷϓϩδΣΫτΛͦͷ··ಡΈࠐΉͱ…
tips:1 Xcode (3/4) • example/ios/example.xcworkspace Λ։͘ ʢpod install͔ͯ͠Βʣ
tips:1 Android Studio (4/4) • example/android/build.gradle Λ։͘
tips:2 Sync modules (1/2) • ios/ android/ Λมߋͯ͠ • ಈ࡞֬ೝexampleҎԼͰ͓͜ͳ͏
• ຖճ yarn install ͢͠ͷ͕͔͔࣌ؒΔ
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
·ͱΊ • Native ModuleΛ։ൃ͢ΔࡍCLIπʔϧ͕ศར • XcodeAndroid StudioͰ։ൃ͢Δ • ࡉ͔͍։ൃͷTipsଞͷOSS͕ࢀߟʹͳΔ •
ಛʹ react-native-community ͕๛
Blog • Native Moduleͷ࡞Γํ - React Native Tech Blog https:#//tech.maricuru.com/entry/2020/02/20/052054