2021/10/04React Native に関する便利ツールを作成した。
React Native Web を利用して、Web上で使える React Native の便利ツールを作りました。
概要
- ツールについて
- アイコン探せる
@expo/vector-icons preview - 影のスタイルを試せる
React Native Shadow Simulato - FlexBox のスタイルを試せる
React Native FlexBox Style Creator
ツールについて
Gatsby とかでWeb用に作ってもよかったのですが、React Native Web を試してみたいと思い、React Native を使って Webサイトを実装しています。 ReactNative のStyle のプレビューなどを作ってみました。
ReactNative で書いたものが html に変換されているので、アプリと全く同じ表現にはなっていないはずです。 ある程度は再現されていることを期待しています。
Expo を利用して、Netlify 上でビルドし発信しています。
アイコン探せる @expo/vector-icons preview
https://honmushi-u-tools.netlify.app/Icons/
@expo/vector-icons のアイコンを探せます。
アイコンセットのファミリーを選択して表示でき、アイコン名で絞り込みができます。 コピーできるようにコードも表示しています。
@expo/vector-icons は react-native-vector-icons を使っています。
基本的にはここで見つけたアイコンは react-native-vector-icons で同じアイコンを利用できます。
影のスタイルを試せる React Native Shadow Simulato
https://honmushi-u-tools.netlify.app/Shadow/
React Native での 影のスタイルをいろいろ試すことができます。 iOS と Android で指定する属性が異なるので、その部分が簡単に確認できたらいいなと思い作成しました。
Android のelevation による指定については、CSS においてどのように変換されるのかわからなかったので未実装です。React Native Web では無視されていた様子でした。
それっぽく変換してくれるライブラリなどは見つかるのですが、正しいのかわからなかったので一旦諦めています。
iOS のものについてもあくまで React Native Web で Web の CSS に変換しているものです。 アプリでの表示と完全に一致するわけではないなのでご注意ください。
FlexBox のスタイルを試せる React Native FlexBox Style Creator
https://honmushi-u-tools.netlify.app/FlexBox/
React Native での FlexBox のスタイルをいろいろ試すことができます。 React Native Webを用いることで、アプリでFlexBoxを指定した時の挙動を再現してます。
Webとの差異や、flex関連の属性の挙動を試すことができます。
おわりに
React Native で Web ページも作れるのは簡単で便利ですね。
今回作ったものはアプリ開発時に使おうと思っているので、実際の端末で使うことは想定していません。開発時にPCのブラウザで参照する使い方を想定しています。
できればレスポンシブ対応とかできたらいいんですが、その辺の Style が React Native Web だと難しそうだったので、見送りとしています。
他にも便利そうなものを思いついたら追加していきます。
React Native Web 関連の新たな仕組みとかできたら、そちらもキャッチアップしていければと考えています。
