Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

React Nativeでお絵描きしてみた

711 views

Published on

React&React Native入門者の会 #2での発表資料です。

Published in: Technology
  • Be the first to comment

  • Be the first to like this

React Nativeでお絵描きしてみた

  1. 1. React Nativeでお絵かきしてみた K. Matsumura (@zuckey_17) React & React Native入門者の会 #2 2017.04.21
  2. 2. 簡単に自己紹介 株式会社ヤプリ 所属 フロントエンドとサーバーサイド 去年の8月に富士通(社内のサポートエンジニアしてました) から転職 React + Reduxで現行の管理画面をリプレース Immutable-js利用のプロジェクトへのFlow導入で悩み中 松村 和輝 (twitter@zuckey_17)
  3. 3. 本題の前に
  4. 4. jQueryって知ってますか? 2016年8月にエンジニアデビュー! React導入のためにES2015を勉強 →$ 怖い
  5. 5. UI実装担当のエンジニアとのやり取り DOMの◯◯いじりたくて jQuery使ってもいいかな? componentDidMount()で 触れば大丈夫だよね?
  6. 6. UI実装担当のエンジニアとのやり取り ちょっと待って下さい。 今、state定義してhandler メソッド用意するので それ使ってください!
  7. 7. jQuery怖い
  8. 8. Native実装担当のエンジニアとのやり取り React Nativeを ピンポイントで導入しませんか? Webビューで済ませているところ も実装できたりして良くないです か?
  9. 9. Native実装担当のエンジニアとのやり取り 君がjQuery使いたくないのと同じで、 React Nativeでやる必要ないよね? iOSもAndroidも専任が居るし。 ぐぬぬ…
  10. 10. React Nativeの知見をためて Nativeコードにもコミットしたい(野望)
  11. 11. 本題
  12. 12. React Nativeを触ってみました 錯視アプリ(友人の昔作ったアプリを再実装)
  13. 13. React Nativeを触ってみました
  14. 14. Animated API
  15. 15. Animated API
  16. 16. Animated API
  17. 17. Animated API
  18. 18. • new Animated.Value(0)でstateを定義 • interpolateで値の変化率を調整する • style 属性の値を動的に変える Animated API
  19. 19. react-native-svg • react-nativeで、お絵かきするときに使う • Circle, Ellipse, G, LinearGradient, RadialGradient, Line, Path, Polygon, Polyline, Rect, Symbol, Text, Use, Defs, Stop • https://github.com/react-native- communty/react-native-svg
  20. 20. react-native-svg
  21. 21. react-native-svg • Animatedでopacityを変えたい! → styleにしか当てられない →opacityに当ててみたら何故か通った! (warning出るけど) • 基本的にreact-native-svgのコンポーネントに Animatedを当てるのではなくViewでラップする
  22. 22. まとめ • 英語のみでドキュメント漁るの辛いけど、修行 • Animatedは便利で楽しい! • ライブラリはgitHubのスターが少なくて ちょっと心配になることが多い
  23. 23. ちょっと個人的に宣伝させてください! • 友人とPodcastをはじめました • “楽しくて仕方がないラジオ” • Twitter @shiganaiRadio • #しがないラジオ

×