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
2. About Me Shinobu Okano @operandoOS Mercari, Inc. Souzoh, Inc.
3. Androider͕
 Android͚ͩͷ͜ͱΛߟ͑ͯ React Nativeͱ
 ৮Ε߹ͬͯΈͨײ૝
4. Demo
5. Demoʹ࢖ͬͨΞϓϦ https://github.com/operando/ React-Native-Sample
6. ։ൃ؀ڥ • WebStorm • Android Studio • Nuclide͸࢖Θͳ͍ • ೖΕͨΒΊͬͪΌAtomॏ͘ͳͬͯܦݧ͕͋ΔͷͰ… • ࠓ͸Ͳ͏͔ͳʁ
7. React Native 1೔໨ͷײ૝ View͕NativeʹམͪΔͱͲΜͳViewͳͷ͔
 ݟ͚ͨͲ...͜Ε͸...ͱ͍͏೰·͍͠ײ
8. React Native 1೔໨ͷײ૝ ͳΜ͔શ෦ͷViewʹReactͱ͔͍ͭͪΌͬͯΔ ViewΛܧঝͨ͠Կ͔ʹͳͬͯΔ
9. React Native 1೔໨ͷײ૝ ͳΜͱͳ͘ཧղͰ͖Δ͚ͲཧղͰ͖Δ͚ͩͲ
 ͦΕҎ্Ͱ΋ͦΕҎԼͰ΋ͳ͍
10. React Native 1೔໨ͷײ૝ ͦΕҎ্Ͱ΋ͦΕҎԼͰ΋ͳ͍
11. React Nativeͷϧʔϓ࡞ۀ • ͜ͷComponentެࣜͰఏڙ͞ΕͯΔ͔ͳʁ • ͳ͍ͧ • ʮreact native ཉ͍͠Component/API໊ githubʯ
 Ͱݕࡧ • ͋ʔ͋ͬͨ͋ͬͨɺ͜Ε͜Ε
12. Α͏͸… • ࡞Γ͍ͨΞϓϦΛ࣮૷্ͰඞཁͳView / API͸
 ͲΜͳ΋ͷͳͷ͔ચ͍ग़͢ • ͦΕΛ࣮ݱ͢ΔComponent΍API Bridge͕
 ଘࡏ͢Δ͔ௐ΂Δ • ެࣜComponent or githubͳͲͳͲ… • ͳ͚Ε͹ɺࣗ෼Ͱॻ͘
13. React NativeͰେมͩͬͨ͜ͱ • ެ͕ࣜఏڙͯ͠ΔComponent͕গͳ͍ • ެ͕ࣜఏڙͯ͠ΔAPI͕ͪΐͬͱ৴༻Ͱ͖ͳ͍ • Nativeͷ࣮૷Λ஌͍ͬͯΔਓ͕Componentͷ ࣮૷ͷཪଆ·Ͱݟͯے͕͍͍΋ͷ͔
 ൑அ͢Δඞཁ͕͋Δ
14. SharedPreferencesతͳAPI • Ӭଓతʹ key / valueͰอଘͰ͖ΔAPI • iOSͰ͍͏UserDefaults
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
16. Preferenceతͳͷ AsyncStorage͕͋Δ͚Ͳ
 ཪͷ࣮૷͕SQLiteͳͷͰ
 Bridge Library࢖͏ํ͕҆શ
17. react-native-default-preference https://github.com/kevinresol/ react-native-default-preference
18. React NativeͰҙ֎ͩͬͨ͜ͱ • Ҋ֎Javascript΍React.jsͷ஌͕ࣝͳͯ͘
 ωΠςΠϒΞϓϦΛ։ൃͯ͠ΔਓͳΒͰ͖ͦ͏ • มߋ͞ΕΔ஋ʹ͸stateʹ͢Ε͹͍͍Μͩͳʂ ఔ౓ • ͳΜͱͳ͘ίʔυॻ͍ͯΔͱͳΜͰReactͰ
 ॻ͍ͯΔΜͩײ͍͢͝
19. React NativeͰັྗΛ
 ײͨ͡ͱ͜Ζ
20. ϓϩδΣΫτ಺ͰωΠςΠϒͷίʔυ ͱReact Nativeͷίʔυ͕ڞଘͰ͖Δ Ұ෦͸ωΠςΠϒͷίʔυ(Java΍Swift)Ͱ
 ΨϦΨϦ࣮૷ͭͭ͠ɺ྆OSͰ࣮૷͕໘౗ͳ
 ͱ͜Ζ͚ͩReact NativeͰ࣮૷͢Δ
21. ϓϩδΣΫτ಺ͰωΠςΠϒͷίʔυ ͱReact Nativeͷίʔυ͕ڞଘͰ͖Δ ωΠςΠϒͷਓ͕࣮૷ͯ͠΋
 ໘ന͘ͳ͍ͱ͜ΖΛ
 React NativeͰ
 ୭͔͕࣮૷ͯ͘͠ΕΔ
22. ϓϩδΣΫτ಺ͰωΠςΠϒͷίʔυ ͱReact Nativeͷίʔυ͕ڞଘͰ͖Δ ྫ͑͹...
 ௨஌ઃఆը໘ͱ͔...
 ઃఆը໘ܥ͸ͦΕͬΆ͍
23. ๻ୡ(ωΠςΠϒΨν੎)͕
 ΋͏࡞Γ๞͖ͨ෦෼Λ
 React NativeͰ
 Α͠ͳʹ࣮૷ͯ͠΄͍͠
24. React NativeΛ͞Βʹ͍͍΋ͷʹ ͢ΔͨΊʹ... Android & iOSΤϯδχΞ͕ؤுͬͯ Componen΍API BridgetΛOSSͰ
 ࡞ͬͯެ։͢Δ
25. React NativeΛ͞Βʹ͍͍΋ͷʹ ͢ΔͨΊʹ... Android & iOSΤϯδχΞ͕ؤுͬͯ Componen΍API BridgetΛOSSͰ
 ࡞ͬͯެ։͢Δ ͦͷ੎͍͕ͳ͍ͱͪΐͬͱݫ͍͠ͱࢥ͏
26. Component΍API BridgeΛ GithubͰެ։ͯ͠ ⭐ ͍ͬͺ͍͍ͬͺ͍ ϫϯνϟϯ
27. React Nativeͷ՝୊ʁ • Android / iOSͦΕͧΕͷϓϥοτϑΥʔϜ
 ݻ༗ͷOSͷಈ͖ʹͲ͏ରԠ͢Δ͔ • NativeͰ࣮૷ͯͯ͠΋೰·͍͠෦෼ • NativeͰ࣮૷͠Ζ΍Ҋ݅
28. ·͋React Native͔Β
 ΞϓϦ։ൃͨͷ͠ʔ
 ͱࢥͬͯ͘ΕΔͱ޾ͤͰ͢
29. ָ͘͠ͳͬͨΒ
 Java΍Swift΋ॻ͍ͯͶ
30. Thanks!!