Upgrade to Pro — share decks privately, control downloads, hide ads and more …

React Native in Nature

A3fa7c92c26f1170762202d574c19e20?s=47 soh335
October 02, 2021

React Native in Nature

A3fa7c92c26f1170762202d574c19e20?s=128

soh335

October 02, 2021
Tweet

Transcript

  1. Oct 2. 2021
 Soh Kitahara React Native in Nature

  2. About Me ࣗݾ঺հ

  3. About Me https://github.com/soh33 5 Nature גࣜձࣾιϑτ΢ΣΞΤϯδχΞ 3

  4. Agenda • Nature ʹ͍ͭͯ • React Native ΁ͷҠߦ • Ҡߦޙ

    • ࠷ۙ • ͜Ε͔Β 4
  5. About Nature Nature ʹ͍ͭͯ

  6. Product

  7. Nature Remo

  8. How It Works 8 εϚʔτσόΠε Nature Remo Ոి ੺֎ઢ Πϯλʔωοτ

  9. Nature Remo E 9

  10. Nature Remo E 10 ՈͷΤωϧΪʔΛϚωδϝϯτ ஝ి஑Λίϯτϩʔϧ

  11. NatureεϚʔτిؾ 11

  12. Nature Smart Eco Mode 12 ΞϓϦ͔ΒON ిؾ୅͕ߴ͘ͳΔ࣌ؒʹ൓Ԡ ΤΞίϯͷԹ౓Λௐઅ 28.0n

  13. Migrate to React Native React Native ΁ͷҠߦ

  14. Ҡߦཧ༝ • 2ਓͰ iOS, Android, firmware, backend ΛΞΫςΟϒʹ։ൃ͍ͯ͘͠ͷ͕೉ ͔ͬͨ͠ •

    ౰࣌ • React Native 0.52. 0 • TypeScript 2.6. 2 • https://employment.en-japan.com/engineerhub/entry/2018/08/17/110000 • 3೥લʹΠϯλϏϡʔͯ͠΋Β͍·ͨ͠ 14
  15. ͜ͷλΠϛϯάͰσβΠϯ΋࡮৽ • ೝূ෦෼͸ϚΠάϨʔγϣϯॲཧΛ༻ҙ • σβΠϯͷ੍໿͸͋Δ • iOS ʹ͋Δจࣈͷେ͖͞Λௐ੔ͯ͠٧ΊΔ΍ͭͱ͔ Android ʹͳ͔ͬ

    ͨΓɺٯ΋͋ΔͷͰ • View पΓ͸΄΅ίʔυ͸ڞ௨Խ͞ΕͯΔ • ΞΫςΟϒʹϦϦʔεͰ͖ΔΑ͏ʹͳͬͨ 15
  16. ڞ௨ԽͰ͖ͳ͔ͬͨ΋ͷ • ωΠςΟϒͷڍಈʹؔ࿈͢Δ΋ͷ • ύʔϛογϣϯपΓ • Geofence पΓ • Wi-Fi

    Λ༻͍ͨηοτΞοϓ • Bluetooth Λ༻͍ͨηοτΞοϓ • Ͳ͔ͪΒ͚ͩڍಈ͕͓͔͘͠ճආࡦΛೖΕͯΔ৔߹ 16
  17. ౰࣌ࠔͬͨϙΠϯτ • σόΠεͷηοτΞοϓ࣌ʹσόΠεࣗ਎ͷωοτϫʔΫʹεϚʔτϑΥ ϯ͕ܨ͙ඞཁ͕͋Δ • Ϛγϯʹىಈ͍ͯ͠ΔσόοΨͱͷ઀ଓ͕੾ΕΔ … • Today widge

    t • https://reactnative.dev/docs/app-extensions 17
  18. ౰࣌ݟक͍ͬͯͨIssue • ςΩετपΓ͕ଟ͍ҹ৅ • CJKಛ༗ͳ΋ͷ΋ • ωΠςΟϒଆͷϏϧυγεςϜ͕࡮৽͞ΕΔͱେม

  19. After Migrated Ҡߦޙ

  20. openssl 20 • react native -> swift, kotlin ͷ bridge

    -> openssl ಡΜͰΔ c ͷίʔυ
  21. D3 + react-native-svg 21 • άϥϑपΓͷܭࢉ͸ D 3 • ඳը͸

    react-native-svg
  22. React Native ͷ Version Λ͋͛ΔλΠϛϯά • ࣍ͷϝδϟʔΞοϓσʔτ͕ग़ͨΒͦͷલͷ࠷ޙ͋ͨΓΛݕ౼ • ຖճͦ͏͍͏Θ͚Ͱ΋ͳ͍͚Ͳ •

    Expo SDK ΋ࢀߟʹ 22
  23. ϥΠϒϥϦपΓ • react-navigatio n • redux & redux-thunk && redux-persist

    & imme r • react-native-map s • react-native-ble-manage r • react-native-sv g • react-native-vector-icon s • react-native-linear-gradien t • lottie-react-nativ e • react-native-i18 n • sentr y • etc… 23
  24. ͋͑ͯ࢖ͬͯͳ͍΋ͷ • Exp o • OT A • Keychain पΓ

    • GeofenceपΓ 24
  25. Expo • Native ͷίʔυΛॻ͔ͳ͍ͱ͍͏બ୒ࢶ͕ͳ͍ • Geofence, Siri ͱ͔ΞϓϦͷϩδοΫΛͦͷ··ॻ͘ඞཁ͕͋Δ 25

  26. Nativeʹ਺ߦॻ͚͹ྑ͍ॲཧ • universalLinksOnly option ͕ඞཁͳ Linking.openUR L • Siri Shortcut

    s • NEHotspotConfiguratio n • Firebase Messaging, Analytics, etc… 26
  27. OTA • react-native ͷ version ʹґଘ͍ͯ͠ΔͷͰɺΞοϓσʔτͷ଍ᐫʹͨ͘͠ ͳ͍ • ࣗ෼ͨͪͰίϯτʔϧͰ͖ͳ͍΋ͷΛ૿΍ͨ͘͠ͳ͍ •

    ࠷ۙ͸৹ࠪૣ͍ 27
  28. Keychain पΓ • Keychain ͸ͪΌΜͱॻ͘ͷ͕೉͍͠ • ৴པ͍ͯ͠ΔϥΠϒϥϦΛ࢖͍͍ͨ • https://github.com/kishikawakatsumi/KeychainAccess •

    ϥοϓͯ͠࢖ͬͯΔ 28
  29. Geofence • ΞϓϦͷϩδοΫʹີ઀ • iOS ͸headless JS ͱ͍͏֓೦ͳ͍ͷͰωΠςΟϒͰී௨ʹॻ͘ • https://reactnative.dev/docs/headless-js-android

    29
  30. React Native ʹύονૹͬͨΓ • Fix typescript constructor parameter propertie s

    • https://github.com/facebook/metro/pull/262 • Fix some languages wrapped texts are cut off on androi d • https://github.com/facebook/react-native/pull/25306 30
  31. ύονΛ౰ͯͨReact Native Λ࢖͏ • https://github.com/facebook/react-native/wiki/Building-from-source • 0.60 ͰऔΓࠐ·ΕͨͷͰɺͦΕ·Ͱ͸ Patched React

    Native Λ࢖ͬͨ 31
  32. Oppo A77 - Some texts gets cut-off • https://github.com/facebook/react-native/issues/15114 •

    One Plus, Oppo ͷσόΠεͰ༻ҙ͞ΕͯΔϑΥϯτΛ࢖͏ ͱจࣈྻͷඳը͕͓͔͍͠ • Roboto Λಉࠝ 32
  33. Recently ࠷ۙ

  34. Hermes 34 • 64bit ରԠޙ Android ؀ڥͰ libjsc.so ͕ϥϯμϜʹΫϥογϡͯ͠͠· ͏ͱ͍͏ͷ͍ʹ౰࣌೰·͞Ε͍ͯ

    ͨ • @kudo-ci/jsc-android ʹஔ͖׵͑ͯΈ ͨΓ
  35. Hermes 35 https://github.com/facebook/hermes/issues/33

  36. Hermes 36

  37. Hermes 37

  38. Renovate 38

  39. Renovate • ؅ཧ͍ͯ͠Δ npm packag e • Podfil e •

    Gemfile (fastlane, cocoapods ͱ͔ʣ • Gradle 39
  40. Renovate 40 "packageRules": [ { "groupName": "react native", "groupSlug": "react-native-deps",

    "matchPackageNames": [ "react", "react-native", "@babel/core", "@babel/runtime", "@react-native-community/eslint-config", "babel-jest", "eslint", "jest", "metro-react-native-babel-preset", "react-test-renderer", "gradle", … • React Native ຊମʹґଘ͍ͯ͠Δͷ͸ ݸʑ্Βͳ͍Α͏ʹ͢Δͱ͔ • Ұ౓ʹ͋͛Δͱͱʹ͔͘େมͳͷͰ౎ ౓্͍͛ͯ͘
  41. Next ͜Ε͔Β

  42. Migrating New Design System 42

  43. Migrating New Design System 43

  44. Migrating New Design System 44

  45. Migrating New Design System • Ұ౓ʹશ෦ม͑Δʹ͸ը໘͕ଟ͍ͷͰɺӨڹ͕େ͖͍ίϯτϩʔϧը໘ͷUI͔Βணख • ϕʔεͱͳΔ৭·ΘΓ΋ࠓޙணख͍͖͍ͯͨ͠ • SPAͱͲ͏σβΠϯγεςϜΛڞ༗͢Δ͔Έ͍ͨͳͷ΋͋Δ͔΋͠Εͳ͍

    • ໛ࡧதͳͷͰ׬ྃͨ͠Β৭ʑ஌ݟ͕ஷ·Δ͔΋͠Εͳ͍ 45
  46. Update react-navigation • ·ͩ v4 ͳͷͰͦΖͦΖ্͍͛ͨ • λϒͷग़͠Θ͚ΛྗٕͰղܾ͍ͯ͠ΔͷΛ΍Ί͍ͨ • ޾ӡͳ͜ͱʹλϒͷύλʔϯ͸͔̏ͭ̐ͭͷೋछྨ

    • ྆ύλʔϯΛ Component ͱͯ͠࡞ΓɺSwitch Navigator Ͱ੾Γସ͑… 46
  47. Update react-navigation 47 <Tab.Navigator> <Tab.Screen name={screens.Control} component={Controls} /> { showEnergy

    && <Tab.Screen name={screens.Energy} component={Energy} /> } ... </Tab.Navigator>
  48. ࣮ࡍ React Native Ͳ͏? • ී௨ʹ࡞ͬͯΕ͹ iOS, Android, ͲͷαΠζͰ΋ಈ͘ͷͰྑ͍ •

    ਖ਼௚ Android ਂ͘Θ͔Βͳ͍͚ͲΞϓϦ͕ී௨ʹ࡞ΕΔ • ͜ͷνʔϜن໛Ͱ1,2िؒʹҰ౓ͷΞοϓσʔτΈ͍ͨͳͷ͸ωΠςΟϒͦ ΕͧΕͩͱݫ͍͠ • TypeScript ͕ྑ͍ 48
  49. ࣮ࡍ React Native Ͳ͏? • SPA ͷϨϏϡʔ΋Ͱ͖ΔΑ͏ʹͳ͍ͬͯͨ • ਖ਼௚ෳࡶͳ͜ͱͨ͘͠ͳ͍ •

    σβΠϯ͕Ͳ͔ͬͪʹدΓ͕ͪ (͏ͪ͸ iOS ΑΓ ) • ωΠςΟϒͷΞοϓσʔτͷΩϟονΞοϓ͕Ͱ͖ͳ͍ͱେม 49
  50. ωΠςΟϒͷΞοϓσʔτͷΩϟονΞοϓ • ࠷ۙηΩϡϦςΟपΓͰݖݶपΓ͕ຖճมΘΔ • Local Network ·ΘΓͷڍಈ΋౓ʑมΘ͍ͬͯΔ • ඳը่͕ΕΔΈ͍ͨͳͷ͸΄΅ͳ͍ 50

  51. React Native ͷόʔδϣϯΞοϓ • ຊମ͕ͦΜͳյΕΔҹ৅͸ͳ͍ • पลϥΠϒϥϦͷํ͕ ? • iOS,

    Android ଆͷ OS ্͕͕ΔλΠϛϯάͷํ͕΍ͬͺΓؾʹͳΔ 51
  52. ωΠςΟϒͰॻ͖͍ͨʁ • ϝϯόʔ૿͑ͨΒͦΕ΋ྑ͍͔΋ • ݁ہνʔϜͷߏ੒ʹΑΓͦ͏ • Ұ୴Ϗϧυͪ͠Ό͑͹ͬ͘͞ͱॻ͍ͯ֬ೝग़དྷΔମݧ͸ؾʹೖͬͯΔ 52

  53. ࠾༻΍ͬͯ·͢ 53 https://nature.global/jp/careers

  54. None