React Native のすゝめ　Tipsまよゐみち

Transcript

1. React Nativeͷ͢ʍΊ Tips·ΑΙΈͪ ˏYutamaKotaro

2. ABOUT ME @YutamaKotaro ▸ ໊ݹ԰ग़਎ͷ΁ͬΆ͜;ΖΜͱ͑Μ Ͳ͑Μ͡ʹ͋ʢ͍̎̒͞ʣ ▸ Webྺɿ̍೥ͪΐͬͱ ▸ ࣾձਓྺɿ2೥(3೥໨ಥೖɾɾɾ)

   ▸ React & ReduxΛ࢖ͬͨ։ൃΛߦͬ ͍ͯ·͢ʢ੾᛭ୖຏֶश͠ͳ͕ Βɾɾɾʣ

3. React Native bring me events React Native Λ࢝Ίͯىͬͨ͜͜ͱɾɾɾɾʂ ▸ pureͳίϯϙʔωϯτ΍࢓༷Ͱͭ·͖ͮ·ͨ͠ɻ

   ▸ ਖ਼௚ɺݸਓతʹ͸ެࣜυΩϡϝϯτ͕ݟͮΒ͍ɾɾɾɾͲ͏͍͍͔ͯ͠෼͔Βͳ͍ͳΓʹؤுͬ ͯΈ·ͨ͠ɻ ▸ ຊ೔͸pureͳίϯϙʔωϯτΛ࢖͍ͬͯͯ٧·ͬͨ͜ͱͱʹ͍ͭͯ঺հ͠ ͍ͨͱࢥ͍·͢ʂ ▸ ͓ৄ͍͠ํ͸ଞʹ΋͍͍΍Γํ͕͋Ε͹ڭ͍͚͑ͯͨͩ·͢ͱ޾͍Ͱ͢ɻ

4. RECOMMEND REACT NATIVE React Native ͷ͢ʍΊ ▸ ϑϩϯτΤϯυΤϯδχΞ(Reacter) ͳΒ͔͚ͯ͠·͏ ▸

   ϋΠϒϦουΞϓϦ(Cordova)ͱൺ΂ ͯຊ౰ʹωΠςΟϒͬΆ͍ΞϓϦΛ ࡞Δ͜ͱ͕Ͱ͖Δɻ ▸ ίʔσΟϯάɺσόοά͸͍ͭ΋ͷ૬ ๮Λ࢖͑Δ(Atom( Sublime ) , Chrome ) ▸ ωΠςΟϒ։ൃٕज़͸ͦΜͳʹ͍Β ͳ͍

5. ▸΍Γ࢝ΊΔ΋ૣ଎ɾɾɾɾ

6. ▸ φϏήʔγϣϯόʔ͕̎छྨબ΂Δʂʂ ▸ ͋ɾɾͳΜ͔ࢥͬͨ௨Γʹಈ͔ͳ͍ɾɾɾɾ

7. THE PATH OF DESTINY Navigator VS NavigatorIOS ▸ Navigator.NavigationBar ▸

   iOS, AndroidͰಈ͘ ▸ React Component ▸ ࣗ༝ɹಈ࡞͕एׯ؇ຫ ▸ NavigatorIOS ▸ iOSͰ͔͠ಈ͔ͳ͍ ▸ UINavigationController ▸ റΓɹಈ࡞͸ߴ଎

8. THE PATH OF DESTINY Navigator VS NavigatorIOS ▸ Navigator.NavigationBar ▸

   iOS, AndroidͰಈ͘ ▸ React Component ▸ ࣗ༝ɹಈ࡞͕؇ຫ ▸ NavigatorIOS ▸ iOSͰ͔͠ಈ͔ͳ͍ ▸ UINavigationController ▸ ΍΍റΓɹಈ࡞͸ߴ଎ Impression ▸ Navigator.NavigationBar ▸ Θ͔Γ΍͍͚͢Ͳαϯϓϧগͳ͍ ▸ ॻ͘ͷ͸গ͠໘౗͍͘͞ ▸ NavigatorIOS ▸ ؆୯ʹ࢖͑Δ͚Ͳɺͪΐͬͱบ ͕͋Δ͜ͱ΋ ▸ ͱͯ΋αΫαΫ ▸ บͱ͍͏͔റΓʁ

9. ▸ ϘλϯΛӈԼʹஔ͖͍ͨ ▸ ͳ͔ͥright, bottom͕ͳ͍ ▸ ͳ͔ͥright, bottom͕ޮ͔ͳ͍

10. ▸ Ͳ͏΍ͬͯӈԼ഑ஔ͢ΔΜͩɾɾʁ ▸ fixed΋ͳ͍Μ͚ͩͲɾɾɾʂʂʂ ▸ flex…………1?

11. DEAR CSS PROPERTIES IN HEAVEN StyleSheet Properties like CSS ▸

    CSSͬΆ͍͚ͲCSS͡Όͳ͍ϓϩύςΟ ▸ inlineʹ໨֮ΊΔɻ ▸ flex:1ͱ͍͏ṖΊ͍ͨهड़ ▸ positionͷϓϩύςΟ஋͸absolute, relativeͷΈ ▸ top, left͸͋Δ͕right, bottom͸ͳ͍ ▸ top, left, right, bottom͸flexΛҙࣝ͠ͳ͍ͱ ޮ͔ͳ͍Α͏ʹײ͡Δ ▸ ˋࢦఆෆՄೳ ▸ top, leftΛݻఆ஋Ͱࢦఆ͢Δͱԣ޲͖΍ଞͷ୺ ຤ͰϨΠΞ΢τ่͕ΕΔ

12. DEAR CSS PROPERTIES IN HEAVEN What is flex? ▸ ͱΓ͋͑ͣ̍ʹ͠ͱ͚ʂͱ͍͏΋ͷͰ͸ͳ

    ͍ɻଟ͍͚Ͳɾɾɾɻ ▸ flexboxతͳϓϩύςΟͱηοτͰ࢖͏ɻ alignItems, flexDirection…. ▸ flexDirectionʹର͢Δൺ཰ Instead of right, bottom, ’fixed’ ▸ ӈԼ഑ஔ͕େมͳ͜ͱ΋ɻflexboxΛۦ ࢖ͯ͠ɺflex-endͳͲͰ৐Γ੾Δɻ ▸ ݻఆ഑ஔ͸position:’absolute’ ▸ εΫϩʔϧ(ScrollViewͳͲ)Λ࣮૷͠ͳ͚Ε ͹εΫϩʔϧͰ͖ͳ͍

13. ▸ ListΛදࣔͤ͞·ͤ͏

14. ▸ ListViewɾɾɾ ▸ ScrollViewɾɾɾ ▸ Μɾɾɾɾʁ

15. SHOULD I USE LISTVIEW OR SCROLLVIEW Scroll View ▸ ७ਮʹεΫϩʔϧྖҬΛઃ͚Δ

    ▸ ௚ײత͔ͭɺ൚༻త way to display List ▸ Ϧετ߲໨͸਺͕֬ఆ͍ͯ͠ͳ͍ͷͰε Ϋϩʔϧ͍ͤͨ͞৔߹͕ଟ͍ɻ ▸ ํ๏͸ೋͭʢ͙Β͍ʣ ▸ ScrollViewίϯϙʔωϯτΛ࢖͏ ▸ ListViewίϯϙʔωϯτΛ࢖͏ ▸ ListView ࢖Θͳͯ͘΋ScrollView࢖͑͹ εΫϩʔϧͰ͖ΔϦετΛ࡞ΕΔɻ ListView ▸ Ϧετ༻ʹScroll ViewΛϥούʔͨ͠΋ ͷɻ ▸ දࣔʹ͸σʔλ͕ඞཁ ▸ ͨͩ୯ʹը໘ʹऩ·Βͳ͘εΫϩʔϧ ͍ͤͨ͞৔߹ʹ͸࢖͑ͳ͍ ▸ sectionΛ࢖͏͜ͱ͕Ͱ͖Δɻ ▸ rowHasChangeͳͲͷΠϕϯτ΋ѻ͏͜ͱ ͕Ͱ͖Δɻ ▸ http://moduscreate.com/react-native-listview-with-section-headers/

16. CONCLUSION ·ͱΊ ▸ ݸਓతʹެࣜͷυΩϡϝϯτ͸͋Μ·Γৄ͘͠ͳ͍ͱࢥͬͨ ▸ ListView.dataSourceͱ͔ຊ౰ʹࡌͬͯͳͯ͘ٽ͖ͦ͏ʹͳͬͨ ▸ React Natvieίϯϙʔωϯτʹ͸ͦΕͧΕɺҙٛͱศརͳ࢖͍ํ͕ ͋Δɻ

    ▸ Xcode͕ຊ౰ʹۂऀɻ ▸ ΄ͱΜͲ৮Βͳ͍͚ͲɺϑΥϯτ௥Ճ΍֎෦ίϯϙʔωϯτ௥ՃͰ৮Βͳ ͍ͱ͍͚ͳ͍γνϡΤʔγϣϯ΋ɾɾ ▸ গ͚͚ͩͩ͠ͲɺωΠςΟϒίʔυΛॻ͔ͳ͍ͱ͍͚ͳ͍γνϡΤʔγϣ ϯ΋ɾɾɾɻࠓޙʹظ଴ʂʂ ▸ ͔͠͠ɺjs͔͠΍ͬͨ͜ͱͳͯ͘΋ͳΜͱ͔ͳͬͨɻ

17. ▸͝ਗ਼ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠ʂʂ ▸ ·ͩ·ͩए଄Ͱ͕͢ɺԿଔΑΖ͓͘͠ئ͍ க͠·͢ʂ