Androiderから見るReact Native

Androiderから見るReact Native

Demoで使ったアプリ
https://github.com/operando/React-Native-Sample

React.js meetup × React Native meetup
https://react-native-meetup.connpass.com/event/49024/

Transcript

1. Androider͔ΒݟΔ
   React Native
   React.js meetup × React Native meetup
   

   View Slide

2. About Me
   Shinobu Okano
   @operandoOS
   Mercari, Inc.
   Souzoh, Inc.
   

   View Slide

3. Androider͕

   Android͚ͩͷ͜ͱΛߟ͑ͯ
   React Nativeͱ

   ৮Ε߹ͬͯΈͨײ૝
   

   View Slide

4. Demo
   

   View Slide

5. Demoʹ࢖ͬͨΞϓϦ
   https://github.com/operando/
   React-Native-Sample
   

   View Slide

6. ։ൃ؀ڥ
   • WebStorm
   • Android Studio
   • Nuclide͸࢖Θͳ͍
   • ೖΕͨΒΊͬͪΌAtomॏ͘ͳͬͯܦݧ͕͋ΔͷͰ…
   • ࠓ͸Ͳ͏͔ͳʁ
   

   View Slide

7. React Native 1೔໨ͷײ૝
   View͕NativeʹམͪΔͱͲΜͳViewͳͷ͔

   ݟ͚ͨͲ...͜Ε͸...ͱ͍͏೰·͍͠ײ
   

   View Slide

8. React Native 1೔໨ͷײ૝
   ͳΜ͔શ෦ͷViewʹReactͱ͔͍ͭͪΌͬͯΔ
   ViewΛܧঝͨ͠Կ͔ʹͳͬͯΔ
   

   View Slide

9. React Native 1೔໨ͷײ૝
   ͳΜͱͳ͘ཧղͰ͖Δ͚ͲཧղͰ͖Δ͚ͩͲ

   ͦΕҎ্Ͱ΋ͦΕҎԼͰ΋ͳ͍
   

   View Slide

10. React Native 1೔໨ͷײ૝
    ͦΕҎ্Ͱ΋ͦΕҎԼͰ΋ͳ͍
    

    View Slide

11. React Nativeͷϧʔϓ࡞ۀ
    • ͜ͷComponentެࣜͰఏڙ͞ΕͯΔ͔ͳʁ
    • ͳ͍ͧ
    • ʮreact native ཉ͍͠Component/API໊ githubʯ

    Ͱݕࡧ
    • ͋ʔ͋ͬͨ͋ͬͨɺ͜Ε͜Ε
    

    View Slide

12. Α͏͸…
    • ࡞Γ͍ͨΞϓϦΛ࣮૷্ͰඞཁͳView / API͸

    ͲΜͳ΋ͷͳͷ͔ચ͍ग़͢
    • ͦΕΛ࣮ݱ͢ΔComponent΍API Bridge͕

    ଘࡏ͢Δ͔ௐ΂Δ
    • ެࣜComponent or githubͳͲͳͲ…
    • ͳ͚Ε͹ɺࣗ෼Ͱॻ͘
    

    View Slide

13. React NativeͰେมͩͬͨ͜ͱ
    • ެ͕ࣜఏڙͯ͠ΔComponent͕গͳ͍
    • ެ͕ࣜఏڙͯ͠ΔAPI͕ͪΐͬͱ৴༻Ͱ͖ͳ͍
    • Nativeͷ࣮૷Λ஌͍ͬͯΔਓ͕Componentͷ
    ࣮૷ͷཪଆ·Ͱݟͯے͕͍͍΋ͷ͔

    ൑அ͢Δඞཁ͕͋Δ
    

    View Slide

14. SharedPreferencesతͳAPI
    • Ӭଓతʹ key / valueͰอଘͰ͖ΔAPI
    • iOSͰ͍͏UserDefaults
    

    View Slide

15. SharedPreferencesతͳAPI
    • AsyncStorage
    • https://facebook.github.io/react-native/docs/
    asyncstorage.html
    • ཪͷ࣮૷͸SQLite
    • https://github.com/facebook/react-native/tree/
    master/ReactAndroid/src/main/java/com/
    facebook/react/modules/storage
    

    View Slide

16. Preferenceతͳͷ
    AsyncStorage͕͋Δ͚Ͳ

    ཪͷ࣮૷͕SQLiteͳͷͰ

    Bridge Library࢖͏ํ͕҆શ
    

    View Slide

17. react-native-default-preference
    https://github.com/kevinresol/
    react-native-default-preference
    

    View Slide

18. React NativeͰҙ֎ͩͬͨ͜ͱ
    • Ҋ֎Javascript΍React.jsͷ஌͕ࣝͳͯ͘

    ωΠςΠϒΞϓϦΛ։ൃͯ͠ΔਓͳΒͰ͖ͦ͏
    • มߋ͞ΕΔ஋ʹ͸stateʹ͢Ε͹͍͍Μͩͳʂ
    ఔ౓
    • ͳΜͱͳ͘ίʔυॻ͍ͯΔͱͳΜͰReactͰ

    ॻ͍ͯΔΜͩײ͍͢͝
    

    View Slide

19. React NativeͰັྗΛ

    ײͨ͡ͱ͜Ζ
    

    View Slide

20. ϓϩδΣΫτ಺ͰωΠςΠϒͷίʔυ
    ͱReact Nativeͷίʔυ͕ڞଘͰ͖Δ
    Ұ෦͸ωΠςΠϒͷίʔυ(Java΍Swift)Ͱ

    ΨϦΨϦ࣮૷ͭͭ͠ɺ྆OSͰ࣮૷͕໘౗ͳ

    ͱ͜Ζ͚ͩReact NativeͰ࣮૷͢Δ
    

    View Slide

21. ϓϩδΣΫτ಺ͰωΠςΠϒͷίʔυ
    ͱReact Nativeͷίʔυ͕ڞଘͰ͖Δ
    ωΠςΠϒͷਓ͕࣮૷ͯ͠΋

    ໘ന͘ͳ͍ͱ͜ΖΛ

    React NativeͰ

    ୭͔͕࣮૷ͯ͘͠ΕΔ
    

    View Slide

22. ϓϩδΣΫτ಺ͰωΠςΠϒͷίʔυ
    ͱReact Nativeͷίʔυ͕ڞଘͰ͖Δ
    ྫ͑͹...

    ௨஌ઃఆը໘ͱ͔...

    ઃఆը໘ܥ͸ͦΕͬΆ͍
    

    View Slide

23. ๻ୡ(ωΠςΠϒΨν੎)͕

    ΋͏࡞Γ๞͖ͨ෦෼Λ

    React NativeͰ

    Α͠ͳʹ࣮૷ͯ͠΄͍͠
    

    View Slide

24. React NativeΛ͞Βʹ͍͍΋ͷʹ
    ͢ΔͨΊʹ...
    Android & iOSΤϯδχΞ͕ؤுͬͯ
    Componen΍API BridgetΛOSSͰ

    ࡞ͬͯެ։͢Δ
    

    View Slide

25. React NativeΛ͞Βʹ͍͍΋ͷʹ
    ͢ΔͨΊʹ...
    Android & iOSΤϯδχΞ͕ؤுͬͯ
    Componen΍API BridgetΛOSSͰ

    ࡞ͬͯެ։͢Δ
    ͦͷ੎͍͕ͳ͍ͱͪΐͬͱݫ͍͠ͱࢥ͏
    

    View Slide

26. Component΍API BridgeΛ
    GithubͰެ։ͯ͠
    ⭐ ͍ͬͺ͍͍ͬͺ͍
    ϫϯνϟϯ
    

    View Slide

27. React Nativeͷ՝୊ʁ
    • Android / iOSͦΕͧΕͷϓϥοτϑΥʔϜ

    ݻ༗ͷOSͷಈ͖ʹͲ͏ରԠ͢Δ͔
    • NativeͰ࣮૷ͯͯ͠΋೰·͍͠෦෼
    • NativeͰ࣮૷͠Ζ΍Ҋ݅
    

    View Slide

28. ·͋React Native͔Β

    ΞϓϦ։ൃͨͷ͠ʔ

    ͱࢥͬͯ͘ΕΔͱ޾ͤͰ͢
    

    View Slide

29. ָ͘͠ͳͬͨΒ

    Java΍Swift΋ॻ͍ͯͶ
    

    View Slide

30. Thanks!!
    

    View Slide