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

1. React Nativeでお絵かきしてみた
K. Matsumura (@zuckey_17)
React & React Native入門者の会 #2
2017.04.21

2. 簡単に自己紹介
株式会社ヤプリ 所属
フロントエンドとサーバーサイド
去年の8月に富士通(社内のサポートエンジニアしてました)
から転職
React + Reduxで現行の管理画面をリプレース
Immutable-js利用のプロジェクトへのFlow導入で悩み中
松村 和輝 (twitter@zuckey_17)

3. 本題の前に

4. jQueryって知ってますか？
2016年8月にエンジニアデビュー！
React導入のためにES2015を勉強
→$ 怖い

5. UI実装担当のエンジニアとのやり取り
DOMの◯◯いじりたくて
jQuery使ってもいいかな？
componentDidMount()で
触れば大丈夫だよね？

6. UI実装担当のエンジニアとのやり取り
ちょっと待って下さい。
今、state定義してhandler
メソッド用意するので
それ使ってください！

7. jQuery怖い

8. Native実装担当のエンジニアとのやり取り
React Nativeを
ピンポイントで導入しませんか？
Webビューで済ませているところ
も実装できたりして良くないです
か？

9. Native実装担当のエンジニアとのやり取り
君がjQuery使いたくないのと同じで、
React Nativeでやる必要ないよね？
iOSもAndroidも専任が居るし。
ぐぬぬ…

10. React Nativeの知見をためて
Nativeコードにもコミットしたい（野望）

11. 本題

12. React Nativeを触ってみました
錯視アプリ（友人の昔作ったアプリを再実装）

13. React Nativeを触ってみました

14. Animated API

15. Animated API

16. Animated API

17. Animated API

18. • new Animated.Value(0)でstateを定義
• interpolateで値の変化率を調整する
• style 属性の値を動的に変える
Animated API

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. react-native-svg

21. react-native-svg
• Animatedでopacityを変えたい！
→ styleにしか当てられない
→opacityに当ててみたら何故か通った！
（warning出るけど）
• 基本的にreact-native-svgのコンポーネントに
Animatedを当てるのではなくViewでラップする

22. まとめ
• 英語のみでドキュメント漁るの辛いけど、修行
• Animatedは便利で楽しい！
• ライブラリはgitHubのスターが少なくて
ちょっと心配になることが多い

23. ちょっと個人的に宣伝させてください！
• 友人とPodcastをはじめました
• “楽しくて仕方がないラジオ”
• Twitter @shiganaiRadio
• #しがないラジオ