Tweet
Tweet

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Ͱ࣮૷͠Ζ΍Ҋ݅

Slide 28

Slide 28 text

·͋React Native͔Β
 ΞϓϦ։ൃͨͷ͠ʔ
 ͱࢥͬͯ͘ΕΔͱ޾ͤͰ͢

Slide 29

Slide 29 text

ָ͘͠ͳͬͨΒ
 Java΍Swift΋ॻ͍ͯͶ

Slide 30

Slide 30 text

Thanks!!