はじめに
React Summitで紹介されていた@shopify/restyleを触ってみました。
@shopify/restyleは、基礎となるスタイルを定数化してコンポーネントの役割ごとに色や間隔のサイズを柔軟に指定できるようにするライブラリのようです。
ReactNativeでスタイルを実装する場合、Stylesheetを定義されているかと思いますが、@shopify/restyleを利用することでStyleSheet.create()からおさらばできて、かつ、スタイルの実装がシンプルになります。
また、Typescriptで実装されていて型が強制されるので、定義していないスタイルがあたることを防いでくれます。
セットアップ
$ npx react-native init RestyleSample --template react-native-template-typescript $ yarn add @shopify/restyle $ cd ios && pod install && cd ../
テーマを定義
テーマオブジェクトを実装します。
app/theme.tsx
const palette = {}で利用する色を定義します。const theme = {}でグローバルテーマオブジェクトを定義し、colors、spacing、breakpointsを設定します。この３つは必須です。- colorsは、コンポーネントの中で利用する為に名前付きで色を定義しています。
- spacingは、
marginなどに指定するサイズを定義します。ちなみに、キーはTシャツのサイズ(s,m,l)を使うのがいいと公式が言ってます。 - breakpoints は、画面サイズの最小幅を定義します。（本記事では使いません）
- textVariantsは、この後でてくるTextコンポーネントで利用するデザインを定義しています。colorにはcolorsのキーを指定することで値を取得することができます。
Box と Text を定義
BoxとTextという既存のコンポーネントが用意されています。
この２つに利用するテーマを指定して定義します。
app/Box.tsx
app/Text.tsx
App.tsx を編集
定義したテーマを利用するには、ThemeProviderに利用するテーマを渡してルートコンポーネントを囲む必要があります。
- BoxのbackgroundColorに指定しているmainBackgroundColorは、テーマオブジェクトのcolorsに定義した色になります。
- Textのvariantには、テーマオブジェクトのtextVariantsに定義したスタイルを指定します。
- BoxとTextに指定しているプロパティはライブラリが用意したものになります。それぞれ指定できるものが異なるので、公式サイトを確認するのをおすすめします。
- Boxで利用できるRestyle Function->
backgroundColor,opacity,visible,layout,spacing,border,shadow,position - Textで利用できるRestyle Function->
color,opacity,visible,typography,textShadow,spacing
この時点で動作確認をすると、
ちゃんとそれぞれのスタイルが反映されているのが確認できます。
ダークモードに対応させる
theme.tsxにダークモード用のテーマを定義します。以下を追記します。
ダークモードを切り替えるられるようにする為、App.tsxを以下のように修正します。
- useState()をつかってダークモードか判断できるようにします。
<ThemeProvider theme={darkMode ? darkTheme : theme}>で利用するテーマが切り替わるようにしています。<Box margin={'l'}>のlは、テーマオブジェクトのspacingで定義したものを指定しています。
実行してみると、ちゃんと切り替わることが確認できました。
さいごに
React Summitで紹介されていたので、軽い気持ちで触ってみましたが、よさげだったので記事にしました。
スタイルの重複を最小限にすることができるので実装が楽になると思います。
Boxのようなコンポーネントを独自で定義できたり、コンポーネントの外でテーマを利用するためにフックが用意されていたりするので、公式サイトを覗いてみるのをおすすめします！
本記事で実装したコードはGitHubに上げました。
最後まで読んでいただきありがとうございました！
