Androiderから見るReact Native

by operandoOS

Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

Androider͕  Android͚ͩͷ͜ͱΛߟ͑ͯ React Nativeͱ  ৮Ε߹ͬͯΈͨײ૝

Slide 4

Slide 4 text

Demo

Slide 5

Slide 5 text

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

Slide 6

Slide 6 text

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

Slide 7

Slide 7 text

React Native 1೔໨ͷײ૝ View͕NativeʹམͪΔͱͲΜͳViewͳͷ͔  ݟ͚ͨͲ...͜Ε͸...ͱ͍͏೰·͍͠ײ

Slide 8

Slide 8 text

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

Slide 9

Slide 9 text

React Native 1೔໨ͷײ૝ ͳΜͱͳ͘ཧղͰ͖Δ͚ͲཧղͰ͖Δ͚ͩͲ  ͦΕҎ্Ͱ΋ͦΕҎԼͰ΋ͳ͍

Slide 10

Slide 10 text

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

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

Α͏͸… • ࡞Γ͍ͨΞϓϦΛ࣮૷্ͰඞཁͳView / API͸  ͲΜͳ΋ͷͳͷ͔ચ͍ग़͢ • ͦΕΛ࣮ݱ͢ΔComponent΍API Bridge͕  ଘࡏ͢Δ͔ௐ΂Δ • ެࣜComponent or githubͳͲͳͲ… • ͳ͚Ε͹ɺࣗ෼Ͱॻ͘

Slide 13

Slide 13 text

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

Slide 14

Slide 14 text

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

Slide 15

Slide 15 text

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

Slide 16

Slide 16 text

Preferenceతͳͷ AsyncStorage͕͋Δ͚Ͳ  ཪͷ࣮૷͕SQLiteͳͷͰ  Bridge Library࢖͏ํ͕҆શ

Slide 17

Slide 17 text

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

Slide 18

Slide 18 text

React NativeͰҙ֎ͩͬͨ͜ͱ • Ҋ֎Javascript΍React.jsͷ஌͕ࣝͳͯ͘  ωΠςΠϒΞϓϦΛ։ൃͯ͠ΔਓͳΒͰ͖ͦ͏ • มߋ͞ΕΔ஋ʹ͸stateʹ͢Ε͹͍͍Μͩͳʂ ఔ౓ • ͳΜͱͳ͘ίʔυॻ͍ͯΔͱͳΜͰReactͰ  ॻ͍ͯΔΜͩײ͍͢͝

Slide 19

Slide 19 text

React NativeͰັྗΛ  ײͨ͡ͱ͜Ζ

Slide 20

Slide 20 text

ϓϩδΣΫτ಺ͰωΠςΠϒͷίʔυ ͱReact Nativeͷίʔυ͕ڞଘͰ͖Δ Ұ෦͸ωΠςΠϒͷίʔυ(Java΍Swift)Ͱ  ΨϦΨϦ࣮૷ͭͭ͠ɺ྆OSͰ࣮૷͕໘౗ͳ  ͱ͜Ζ͚ͩReact NativeͰ࣮૷͢Δ

Slide 21

Slide 21 text

ϓϩδΣΫτ಺ͰωΠςΠϒͷίʔυ ͱReact Nativeͷίʔυ͕ڞଘͰ͖Δ ωΠςΠϒͷਓ͕࣮૷ͯ͠΋  ໘ന͘ͳ͍ͱ͜ΖΛ  React NativeͰ  ୭͔͕࣮૷ͯ͘͠ΕΔ

Slide 22

Slide 22 text

ϓϩδΣΫτ಺ͰωΠςΠϒͷίʔυ ͱReact Nativeͷίʔυ͕ڞଘͰ͖Δ ྫ͑͹...  ௨஌ઃఆը໘ͱ͔...  ઃఆը໘ܥ͸ͦΕͬΆ͍

Slide 23

Slide 23 text

๻ୡ(ωΠςΠϒΨν੎)͕  ΋͏࡞Γ๞͖ͨ෦෼Λ  React NativeͰ  Α͠ͳʹ࣮૷ͯ͠΄͍͠

Slide 24

Slide 24 text

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

Slide 25

Slide 25 text

React NativeΛ͞Βʹ͍͍΋ͷʹ ͢ΔͨΊʹ... Android & iOSΤϯδχΞ͕ؤுͬͯ Componen΍API BridgetΛOSSͰ  ࡞ͬͯެ։͢Δ ͦͷ੎͍͕ͳ͍ͱͪΐͬͱݫ͍͠ͱࢥ͏

Slide 26

Slide 26 text

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

Slide 27

Slide 27 text

React Nativeͷ՝୊ʁ • Android / iOSͦΕͧΕͷϓϥοτϑΥʔϜ  ݻ༗ͷOSͷಈ͖ʹͲ͏ରԠ͢Δ͔ • NativeͰ࣮૷ͯͯ͠΋೰·͍͠෦෼ • NativeͰ࣮૷͠Ζ΍Ҋ݅