2
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 1 year has passed since last update.

【2022年度】ReactNative関連のブックマークを整理

Posted at

はじめに

ReactNativeにハマって気づいたら約4年目ですがChromeにブックマークしてあるリンク集を一度整理します。
その中で不要になったものはこの記事に供養していき、開発者及び記事作成者への感謝を伝えられたらなと思います。
いつも窮地から救っていただきありがとうございます。

今はメジャーではないライブラリ等あるかもしれませんので
その場合はご指摘いただけますと幸いです。


(1)Expo Examples
まずはExpoを用いたサンプルプロジェクト群
バージョンが古いのでそのまま流用はできないことがほとんどですが、いざ困ったときように頭の片隅にあるともしかしたら役にたつケースがあるかもしれません。


(2)Expo SDKまとめ
ExpoのAPI周りを日本語で簡潔にまとめてくださっている記事。ざっくりとネイティブのどんな機能を提供しているのか把握しておくといざというときに「そういえばExpoにあったな。」となるかもしれませんのでぜひご一読を。


(3)ドラッグ&ドロップ関連ライブラリ
最近DnD辺りを実装していないので流行りのライブラリは不明ですが、PanGestureと多少数学の知識があれば自作も実現可能のはず
要件を満たせない場合は以下のコードを参考にカスタマイズしてみてください。

https://github.com/computerjazz/react-native-draggable-flatlist
https://github.com/gitim/react-native-sortable-list


(4)Stripe
webアプリやネイティブでのスマホ決済対象外商品の決済などで役立つStripe
それをReactNativeで実装した際にお世話になったリンクです。
ワンナイト人狼学生の時にめっちゃしてました。てるてるが大好きです笑
https://stripe.dev/stripe-react-native/api-reference/index.html
https://qiita.com/mogmet/items/cddc182156028c928ecf


(5)カルーセル
以下ライブラリがシェアを独占してそうですが、
要件を満たせない場合はScrollViewとReAnimatedで自作した方が早いかもしれません。

https://github.com/meliorence/react-native-snap-carousel
https://github.com/dohooo/react-native-reanimated-carousel


(6)アニメーション
自作アニメーションを作るのであれば基本これ一択。
既にUIスレッドからの脱却は実現しパフォーマンスはかなりよくなるものの、
最近どこかでさらにパフォーマンスが良くなると噂を聞きました。楽しみで仕方ない・・!!!


(7)通信デバッグ
自作アプリや他アプリの通信をデバッグする際に使うCharles
これを知ってると選択肢の幅が広がるので一度試しておくとネイティブエンジニアとして強くなれるかもしれません。
悪い使い方はしないようにご注意ください😇


(8)FlashList
リスト関連でパフォーマンスを向上させたい時はこちらを試してみてください。
RN標準のFlatListとほぼ同じpropsなので実装も楽です。
ExpoでもSDK v46でサポートされるようになりました。


(9)SVG
A. webのsvgをReactNative用にpathとか抜き出したいよおおお
B. pngをsvgに変換したいよおおおお
って時に便利な変換サイトです
A. https://transform.tools/svg-to-react-native
B. https://www.freeconvert.com/png-to-svg


(10)写真や画像
アイコンや静的画像などは圧縮してなるべくアプリサイズを下げたいと思います
そんなときに最適化やbase64への変化を行うようでつかうサイトたち。
https://imagecompressor.com/ja/
https://www.base64-image.de/


(11)ReactNativeの全貌(?)
ReactNative用のライブラリやサンプルPJなど。
とにかくすごいボリュームでまとめられてるので一度リンクを開いて眺めてみてください。
https://github.com/jondot/awesome-react-native


(12)LottieFiles
Lottie用の素材を探す際には利用しておきたい神サイト
見てるだけでワクワクするようなアニメーションが大量にあるので眺めるだけでも楽しいと思います。


(13)画像からカラーコードを抽出
アイコンとアプリデザインで色を統一したいけどカラーコードがわからない!
といった状況でもこのサイトがあれば解決できます。シンプルに便利

おわりに

Flutterでも半年ほど実務経験を積んでいますが、
まだまだReactNativeへの愛情は消えそうにないです。
それどころか日に日に増しています笑

その愛をそろそろ形として業界に貢献できたらなと少し思い始めましたので
今後とも発信できるよう努力していきます。。。!

Twitterで雑に絡んでいただけると嬉しいです。
https://twitter.com/nakapooooon

最後まで読んでいただきありがとうございました😊

2
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
2
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?