Tailwind CSS به دلیل رویکرد کاربردی و یکپارچه سازی یکپارچه آن در دنیای توسعه وب بسیار محبوب بوده است.

با این حال، هنگام توسعه برنامه های تلفن همراه با React Native، ادغام Tailwind CSS ممکن است چالش برانگیز باشد. اما حدس بزنید چی؟ دیگر نه. با توسعه ابزارهایی مانند NativeWind ، توسعه‌دهندگان React Native می‌توانند از قدرت Tailwind CSS برای طراحی رابط‌های کاربری تلفن همراه خیره‌کننده و پاسخگو استفاده کنند.

در این آموزش، فرآیند ادغام Tailwind CSS را با برنامه React Native Expo با استفاده از NativeWind خواهید آموخت. ما همچنین یک صفحه ورود ساده با NativeWind خواهیم ساخت.

فهرست مطالب:

NativeWind چیست؟

پیش نیازها

شروع شدن

نحوه ایجاد یک برنامه Expo جدید

نحوه نصب NativeWind

نحوه راه اندازی Tailwind CSS

نحوه پیکربندی NativeWind با Babel

نحوه استایل با NativeWind

چگونه یک صفحه ورود ساده بسازیم

نتیجه

NativeWind چیست؟

NativeWind به عنوان پلی بین Tailwind CSS و React Native Expo عمل می‌کند و به توسعه‌دهندگان این امکان را می‌دهد تا از رویکرد اول ابزار Tailwind در گردش کار توسعه برنامه تلفن همراه خود استفاده کنند.

NativeWind مزایای مختلفی را برای توسعه دهندگان فراهم می کند که برخی از این مزایا عبارتند از:

سینتکس آشنا : توسعه دهندگانی که با Tailwind CSS آشنایی دارند می توانند به راحتی به استفاده از NativeWind در پروژه های React Native خود مهاجرت کنند و منحنی یادگیری را تسهیل کنند.

استایل ثابت: NativeWind با ارائه مجموعه‌ای از اجزا و خدمات، استایل ثابت را در سراسر پلتفرم‌ها تضمین می‌کند.

انعطاف پذیری : NativeWind به توسعه دهندگان این امکان را می دهد که به راحتی سبک ها را برای مطابقت با مشخصات طراحی برنامه تطبیق داده و گسترش دهند.

به طور کلی، مجموعه‌ای از مؤلفه‌ها و ابزارهایی را ارائه می‌کند که بسیار شبیه به Tailwind CSS هستند و به توسعه‌دهندگان اجازه می‌دهد تا کد کوتاه‌تر و مختصرتر ایجاد کنند و در عین حال انعطاف‌پذیری و سازگاری را در بین پلتفرم‌ها حفظ کنند.

Tailwind به نوشتن کد احساس می‌کند که از یک ابزار طراحی استفاده می‌کنم - دیدیه کتز

پیش نیازها

درک اولیه React Native Expo و Tailwind CSS.

Node.js و npm (یا نخ) نصب شده است.

تمایل به یادگیری :)

شروع شدن

قبل از اینکه Tailwind CSS را در برنامه React Native Expo خود ادغام کنید، باید مطمئن شوید که ابزارهای لازم را تنظیم کرده اید.

اگر قبلاً Expo و expo-cli را به صورت سراسری نصب نکرده‌اید، می‌توانید این کار را با استفاده از npm یا yarn انجام دهید:

 npm install -g expo-cli

یا

 yarn global add expo-cli

نحوه ایجاد یک برنامه Expo جدید

با نصب expo-cli، اکنون می توانید یک پروژه جدید React Native Expo ایجاد کنید.

به دایرکتوری که می خواهید پروژه خود را ایجاد کنید بروید و ترمینال را باز کنید. می توانید این کار را با فشار دادن CTRL + ` در کد ویژوال استودیو انجام دهید. سپس این دستور را در ترمینال اجرا کنید:

 npx create-expo-app simpleproject

این دستور یک پروژه Expo را در دایرکتوری شما ایجاد می کند.

نحوه نصب NativeWind

پس از ایجاد پروژه اکسپو خود، می توانید NativeWind و وابستگی های آن را با اجرای دستورات زیر در فهرست پروژه خود نصب کنید:

 cd simpleproject npm i nativewind npm i --dev tailwindcss@3.3.2

یا

 cd simpleproject yarn add nativewind yarn add --dev tailwindcss@3.3.2

در مرحله بعد، باید یک فایل tailwind.config.js ایجاد کنید. برای انجام این کار، این دستور را در ترمینال خود اجرا کنید:

 npx tailwindcss init

این منجر به یک فایل tailwind.config.js در دایرکتوری ریشه پروژه شما می شود.

نحوه راه اندازی Tailwind CSS

برای راه اندازی Tailwind CSS در پروژه خود، به فایل tailwind.config.js خود بروید و در قسمت content ، مسیرهای اجزای خود را وارد کنید. فایل tailwind.config.js شما به شکل زیر خواهد بود:

 /** @type {import('tailwindcss').Config} */ module.exports = { content: [ "./App.{js,jsx,ts,tsx}", "./<custom directory>/**/*.{js,jsx,ts,tsx}", ], theme: { extend: {}, }, plugins: [], };

از گفت ن مسیر به اجزا" srcset="https://www.freecodecamp.org/news/content/images/size/w600/2024/02/code-1.png 600w, https://www.freecodecamp.org/news/content/images/2024/02/code-1.png 964w" width="964" height="582" loading="lazy">

در مثال بالا، می توانید <custom directory> با نام واقعی فهرست خود جایگزین کنید.

نحوه پیکربندی NativeWind با Babel

همچنین باید NativeWind را با Babel پیکربندی کنید. برای انجام این کار، افزونه NativeWind را در babel.conf.js پروژه خود قرار دهید فایل:

 plugins: ["nativewind/babel"],

فایل babel.conf.js پس از گفت ن افزونه NativeWind به این شکل خواهد بود:

 module.exports = function (api) { api.cache(true); return { presets: ["babel-preset-expo"], plugins: ["nativewind/babel"], }; };

از گفت ن افزونه nativewind" srcset="https://www.freecodecamp.org/news/content/images/size/w600/2024/02/code2-2.png 600w, https://www.freecodecamp.org/news/content/images/2024/02/code2-2.png 725w" width="725" height="386" loading="lazy">

با گنجاندن افزونه NativeWind در فایل پیکربندی Babel، اطمینان حاصل می کنید که عملکرد NativeWind به درستی در پایگاه کد جاوا اسکریپت پروژه شما گنجانده شده است.

🎉با این کار، NativeWind با موفقیت در برنامه Expo شما ادغام شده است. گام بعدی این است که استایل کردن برنامه را با NativeWind شروع کنید.

نحوه استایل با NativeWind

برای شروع استایل‌سازی با NativeWind، به فایل App.js پروژه خود یا مؤلفه‌ای که می‌خواهید استایل بدهید بروید، که به‌طور پیش‌فرض به این شکل است:

 import { StatusBar } from "expo-status-bar"; import { StyleSheet, Text, View } from "react-native"; export default function App() { return ( <View style={styles.container}> <Text>Open up App.js to start working on your app!</Text> <StatusBar style='auto' /> </View> ); } const styles = StyleSheet.create({ container: { flex: 1, backgroundColor: "#fff", alignItems: "center", justifyContent: "center", }, });

سپس، مؤلفه خود را تغییر دهید تا از شر هر نمونه از StyleSheet خلاص شوید انتزاع - مفهوم - برداشت. در این مثال، کد App.js را اصلاح می کنیم. پس از تنظیمات، باید چیزی شبیه به این داشته باشیم:

 import { StatusBar } from "expo-status-bar"; // import { StyleSheet, Text, View } from "react-native"; import { Text, View } from "react-native"; export default function App() { return ( // <View style={styles.container}> <View className='flex-1 justify-center items-center bg-white'> <Text>Open up App.js to start working on your app!</Text> <StatusBar style='auto' /> </View> ); } // const styles = StyleSheet.create({ // container: { // flex: 1, // backgroundColor: "#fff", // alignItems: "center", // justifyContent: "center", // }, // });

از اصلاح" srcset="https://www.freecodecamp.org/news/content/images/size/w600/2024/02/newww.png 600w, https://www.freecodecamp.org/news/content/images/size/w1000/2024/02/newww.png 1000w, https://www.freecodecamp.org/news/content/images/2024/02/newww.png 1249w" sizes="(min-width: 1200px) 1200px" width="1249" height="926" loading="lazy">

در بلوک کد اصلاح شده، همه موارد انتزاعی StyleSheet را حذف می کنیم، از جمله دستور import برای stylesheet و تابع StyleSheet.create ، و ما در تابع بازگشت App.js style با className جایگزین می کنیم.

پس از رفع این مشکل، تنها کاری که باید انجام دهید این است که کلاس های Tailwind CSS را در className برنامه خود بنویسید تا شروع به پیاده سازی Tailwind CSS در برنامه خود کنید. با ساختن یک صفحه ورود ساده با NativeWind، این را در مدت کوتاهی خواهید دید.

چگونه یک صفحه ورود ساده بسازیم

اکنون، بیایید به ساخت یک صفحه ورود ساده با استفاده از NativeWind بپردازیم. ما به تنظیمات اولیه در فایل App.js ادامه می دهیم و به تدریج اجزایی را برای ایجاد رابط کاربری اضافه می کنیم.

ابتدا کد موجود در فایل App.js را با کد زیر جایگزین می کنیم:

 import { StatusBar } from "expo-status-bar"; import { Text, View } from "react-native"; export default function App() { return ( <View className='flex-1 justify-center items-center bg-white'> <StatusBar style='auto' /> <Text className='text-center mt-3 text-2xl font-light text-orange-300'> Login </Text> {/* Additional components goes here */} </View> ); }

به سیستم" srcset="https://www.freecodecamp.org/news/content/images/size/w600/2024/02/firstt.png 600w, https://www.freecodecamp.org/news/content/images/size/w1000/2024/02/firstt.png 1000w, https://www.freecodecamp.org/news/content/images/2024/02/firstt.png 1454w" sizes="(min-width: 1200px) 1200px" width="1454" height="639" loading="lazy">

کد بالا اجزای ضروری را از React Native و Expo وارد می کند. سپس از یک کامپوننت View برای تعریف ساختار صفحه ورود به سیستم خود استفاده می کنیم که با کلاس های کاربردی NativeWind استایل بندی شده است. در داخل View ، ما یک جزء Text داریم که "Login" را با استایلی که با استفاده از کلاس‌های NativeWind اعمال می‌شود، نمایش می‌دهد.

در مرحله بعد، می توانید اجزای فرم ورود خود را اضافه کنید، مانند فیلدهای ورودی نام کاربری و رمز عبور، یک دکمه ورود به سیستم و هر عنصر ضروری دیگر. در اینجا مثالی از نحوه گسترش صفحه ورود به سیستم آورده شده است:

 import { StatusBar } from "expo-status-bar"; import { Text, View, TouchableOpacity, TextInput } from "react-native"; export default function App() { return ( <View className='flex-1 justify-center items-center bg-white'> <StatusBar style='auto' /> <Text className='text-center mt-3 text-2xl font-light text-orange-300'> Login </Text> {/* Additional components goes here */} <View className='mt-5 mx-5'> <View> <Text className='text-gray-400'>EMAIL:</Text> <TextInput placeholder='Enter Email...' className='border border-dotted p-2 text-gray-500 border-amber-400 mt-1' /> </View> <View className='mt-3'> <Text className='text-gray-400'>PASSWORD:</Text> <TextInput secureTextEntry placeholder='Enter Password...' className='border text-gray-500 border-dotted p-2 border-amber-400 mt-1' /> </View> <TouchableOpacity className='bg-orange-300 p-3 mt-4'> <Text className='text-center text-base text-white'>Login</Text> </TouchableOpacity> <Text className='text-center font-normal text-gray-500 text-base mt-3'> OR </Text> <View className='mt-4'> <TouchableOpacity className='flex flex-row items-center justify-center p-2 bg-orange-300'> <Text className='text-white mx-2 text-sm'>Sign In With Google</Text> </TouchableOpacity> </View> <View className='mt-6 flex-row justify-center'> <Text className=''>New to FreeCodeCamp? </Text> <TouchableOpacity> <Text className='text-amber-500'>Create an Account</Text> </TouchableOpacity> </View> </View> </View> ); }

به سیستم گسترده با اجزای اضافی" srcset="https://www.freecodecamp.org/news/content/images/size/w600/2024/02/nextend-1.png 600w, https://www.freecodecamp.org/news/content/images/size/w1000/2024/02/nextend-1.png 1000w, https://www.freecodecamp.org/news/content/images/size/w1600/2024/02/nextend-1.png 1600w, https://www.freecodecamp.org/news/content/images/2024/02/nextend-1.png 1820w" sizes="(min-width: 720px) 720px" width="1820" height="1995" loading="lazy">

در این نسخه توسعه‌یافته، اجزای TextInput را برای قسمت‌های ورودی نام کاربری و رمز عبور، و همچنین TouchableOpacity برای دکمه ورود قرار داده‌ایم. استایل‌سازی با کلاس‌های کاربردی NativeWind انجام می‌شود تا ظاهری تمیز و ثابت داشته باشد.

علاوه بر این، هنگامی که ایجاد صفحه ورود خود را با استفاده از NativeWind در پروژه React Native Expo خود به پایان رساندید، باید آن را آزمایش کنید تا تحلیل کنید که آیا همه چیز به درستی کار می کند یا خیر. با اجرای این دستور در ترمینال خود می توانید این کار را انجام دهید:

 expo start

این دستور باندلر را راه اندازی می کند و یک کد QR ایجاد می کند. برای باز کردن برنامه، کد QR نمایش داده شده در ترمینال را با دوربین شبیه ساز خود اسکن کنید یا "a" را برای اندروید یا "i" را برای iOS فشار دهید.

در صورت نیاز، می توانید به کد پروژه کامل در GitHub دسترسی داشته باشید.

نتیجه

ادغام Tailwind CSS در یک پروژه React Native Expo با NativeWind مزایای مختلفی از جمله افزایش کارایی توسعه‌دهنده، سازگاری کد و عملکرد دارد. توسعه دهندگان به راحتی می توانند با استفاده از قدرت رویکرد کاربردی Tailwind CSS و ویژگی های بومی React Native، برنامه های موبایل شگفت انگیز ایجاد کنند.

NativeWind استفاده از Tailwind CSS را در برنامه React Native Expo آسان می کند. استفاده از Tailwind CSS در گردش کار توسعه برنامه تلفن همراه شما، امکانات جدیدی را برای طراحی و سفارشی سازی UI باز می کند.

به یاد داشته باشید، اگر سؤالی دارید یا فقط می خواهید سلام کنید، در X (تویتر) یا وب سایت من با من تماس بگیرید. :)

خبرکاو