O slideshow foi denunciado.
Utilizamos seu perfil e dados de atividades no LinkedIn para personalizar e exibir anúncios mais relevantes. Altere suas preferências de anúncios quando desejar.

React Nativeでお絵描きしてみた

1.007 visualizações

Publicada em

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

Publicada em: Tecnologia
  • Seja o primeiro a comentar

  • Seja a primeira pessoa a gostar disto

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 • #しがないラジオ

×