公式DocのQuick Startを参照しながらやったのですが、詰まった点があり、手順を踏まえて共有します。React Nativeのバージョンは以下です。
"react-native": "^0.72.5",
詰まったところ
Quick StartのExpoの手順通りやったのに、.tsxファイル内のclassNameプロパティに対してNo overload matchs this callという内容のエラーがでる
解決策
app.d.tsファイルによる型拡張宣言を入れた
導入手順
1. Typescriptの設定ファイルを作成する
ルートディレクトリ直下に app.d.ts を作成し、以下を記述
/// <reference types="nativewind/types" />
※ここが重要です。公式のQuick Startの手順だとこの手順を踏むべきか分かりづらくなっていますが、この手順を挟まないと件のエラーが出ます。
2. TailwindCSSの設定・インストール
yarn add nativewind yarn add --dev tailwindcss
次に以下を入力し、tailwind.config.jsを作成
npx tailwindcss init
tailwind.config.jsに以下を記述
// tailwind.config.js
module.exports = {
- content: [],
+ content: ["./App.{js,jsx,ts,tsx}", "./<custom directory>/**/*.{js,jsx,ts,tsx}"],
theme: {
extend: {},
},
plugins: [],
}
3. Babel pluginの追加
babel.config.jsに以下のように追記する
// babel.config.js
module.exports = function (api) {
api.cache(true);
return {
presets: ["babel-preset-expo"],
+ plugins: ["nativewind/babel"],
};
};
