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

Nature での React Native アプリの運用について / React Nativ...

soh335
September 03, 2020

Nature での React Native アプリの運用について / React Native App in Nature

soh335

September 03, 2020
Tweet

More Decks by soh335

Other Decks in Programming

Transcript

  1. 5

  2. • ΞϓϦ: 2 • όοΫΤϯυ: 3 • ϑΝʔϜ΢ΣΞ: 2 •

    ߹ܭ 5 ਓ ιϑτ΢ΣΞΤϯδχΞνʔϜ 7
  3. Ҡߦཧ༝ • ೋਓͰ iOS, Android ΛΞΫςΟϒʹ։ൃ͍ͯ͘͠ͷ͕೉͔ͬͨ͠ • ౰࣌ • React

    Native 0.52.0 • TypeScript 2.6.2 • https://employment.en-japan.com/engineerhub/entry/ 2018/08/17/110000 • 2೥લʹΠϯλϏϡʔͯ͠΋Β͍·ͨ͠ 10
  4. ڞ௨ԽͰ͖ͳ͔ͬͨ΋ͷ • ωΠςΟϒͷڍಈʹؔ࿈͢Δ΋ͷ • ύʔϛογϣϯपΓ • Geofence पΓ • ϝʔϥ։͘ͱ͜Ζͱ͔

    • ౰࣌͸ͳ͔͕ͬͨ Bluetooth पΓ • Ͳ͔ͪΒ͚ͩڍಈ͕͓͔͘͠ճආࡦΛೖΕͯΔ৔߹ 12
  5. • React Navigation Λ࢖͍ͬͯΔͷͰ Screen Component ༻ҙͯ͠ • ࠷ۙ͸ hooks

    ΋࢖ͬͯॻ͍ͯΔ • ෳࡶͳσβΠϯʹͨ͘͠ͳ͍ͷͰγϯϓϧʹ ৽͍͠ը໘ 17
  6. ϥΠϒϥϦपΓ • react-navigation • redux & redux-persist & immer •

    react-native-maps • react-native-ble-manager • react-native-svg • react-native-vector-icons • react-native-linear-gradient • lottie-react-native • sentry 20
  7. React Native ʹύονૹͬͨΓ • Fix typescript constructor parameter properties •

    https://github.com/facebook/metro/pull/262 • Fix some languages wrapped texts are cut off on android • https://github.com/facebook/react-native/pull/25306 27
  8. Fix typescript constructor parameter properties 29 function Employee(name) { _classCallCheck(this,

    Employee); return _possibleConstructorReturn(this, _getPrototypeOf(Employee).call(this)); } function Employee(name) { var _this; _classCallCheck(this, Employee); _this = _possibleConstructorReturn(this, _getPrototypeOf(Employee).call(this)); _this.name = name; return _this; }
  9. Fix some languages wrapped texts are cut off on android

    30 export default class App extends React.Component { render() { return ( <View style={{marginTop: 30}}> <Text>ABCDEFGHIJKLMNOPQRSTUVWXYZABCDEFGHIJKLMNOPQRSTUVWXYZ</Text> <Text>͜ΕͰͪΐ͏Ͳेจࣈ͜ΕͰͪΐ͏Ͳेจࣈ͜ΕͰͪΐ͏Ͳेจࣈ͜ΕͰͪΐ͏Ͳेจࣈ</Text> <Text>͜ΕͰͪΐ͏Ͳेจࣈ͜ΕͰͪΐ͏Ͳेจࣈ</Text> <Text>㟬޷ૣ্޷㟬ૌ޷࿝ഽ޷㟬޷ૣ্޷㟬ૌ޷࿝ഽ޷㟬޷ૣ্޷㟬ૌ޷࿝ഽ޷</Text> <Text>㟬޷ૣ্޷㟬ૌ޷࿝ഽ޷</Text> </View> ); } }
  10. Oppo A77 - Some texts gets cut-off • https://github.com/facebook/react-native/issues/ 15114

    • One Plus, Oppo ͷσόΠεͰ༻ҙ͞ΕͯΔϑΥϯτ Λ࢖͏ͱจࣈྻͷඳը͕͓͔͍͠
  11. ࣮ࡍ React Native Ͳ͏? • ී௨ʹ࡞ͬͯΕ͹ iOS, Android, ͲͷαΠζͰ΋ಈ͘ͷͰྑ͍ •

    ਖ਼௚ Android ਂ͘Θ͔Βͳ͍͚ͲΞϓϦ͕ී௨ʹ࡞ΕΔ • ͜ͷνʔϜن໛Ͱ1,2िؒʹҰ౓ͷΞοϓσʔτΈ͍ͨͳͷ͸ωΠςΟϒͦ ΕͧΕͩͱݫ͍͠ • TypeScript ͕ྑ͍ 36
  12. ࣮ࡍ React Native Ͳ͏? • Web ϑϩϯτΤϯυ΍ͬͯͳ͍͠ɺReact ʹڧ͍஌ݟ͕͋ΔΘ͚Ͱ͸ͳ͍ • ਖ਼௚ෳࡶͳ͜ͱͨ͘͠ͳ͍

    • σβΠϯ͕Ͳ͔ͬͪʹدΓ͕ͪ (͏ͪ͸ iOS ΑΓ) • ωΠςΟϒͷΞοϓσʔτͷΩϟονΞοϓ͕Ͱ͖ͳ͍ͱେม 37