کتابخانه Native Base در React Native

در دنیای توسعه اپلیکیشن‌های موبایل با React Native، ساخت رابط کاربری زیبا و استاندارد یکی از مهم‌ترین چالش‌هاست. اینجاست که کتابخانه NativeBase وارد میدان می‌شود.

NativeBase یک UI Kit قدرتمند است که به شما کمک می‌کند بدون درگیر شدن با جزئیات پیچیده طراحی، رابط کاربری حرفه‌ای و قابل‌سفارشی‌سازی بسازید.

🚀 NativeBase چیست؟

NativeBase یک کتابخانه کامپوننت آماده برای React Native است که مجموعه‌ای از عناصر UI مانند دکمه، فرم، کارت، مودال و… را در اختیار شما قرار می‌دهد.

این کتابخانه:

• Cross-platform است (Android و iOS)
• بر پایه سیستم طراحی مدرن ساخته شده
• به شدت قابل سفارشی‌سازی است
• از تم (Theme) پشتیبانی می‌کند

🎯 چرا از NativeBase استفاده کنیم؟

1. افزایش سرعت توسعه

به جای ساخت کامپوننت‌ها از صفر، می‌توانید از کامپوننت‌های آماده استفاده کنید.

2. طراحی استاندارد

کامپوننت‌ها بر اساس اصول طراحی مدرن (مشابه Material Design) ساخته شده‌اند.

3. سازگاری بالا

در هر دو پلتفرم Android و iOS رفتار یکسانی دارد.

4. پشتیبانی از Dark Mode 🌙

به راحتی می‌توانید تم تاریک و روشن پیاده‌سازی کنید.

📦 نصب NativeBase

برای شروع:

npm install native-base react-native-svg react-native-safe-area-context

یا:

yarn add native-base react-native-svg react-native-safe-area-context

⚙️ راه‌اندازی اولیه

در فایل App.js:

import { NativeBaseProvider, Text, Box } from "native-base";

export default function App() {
  return (
    <NativeBaseProvider>
      <Box flex={1} justifyContent="center" alignItems="center">
        <Text>Hello NativeBase 🚀</Text>
      </Box>
    </NativeBaseProvider>
  );
}

🔘 Button

import { Button } from "native-base";

<Button onPress={() => console.log("Clicked")}>
  Click Me
</Button>

📝 Input

import { Input } from "native-base";

<Input placeholder="Enter your name" />

📦 Box (پرکاربردترین کامپوننت)

import { Box } from "native-base";

<Box bg="primary.500" p="4" rounded="md">
  Content Here
</Box>

🧾 Card

import { Box, Text } from "native-base";

<Box borderWidth={1} borderRadius="lg" p="4">
  <Text>Card Content</Text>
</Box>

🎨 سفارشی‌سازی (Theming)

یکی از قوی‌ترین ویژگی‌های NativeBase سیستم Theme آن است:

import { extendTheme, NativeBaseProvider } from "native-base";

const theme = extendTheme({
  colors: {
    primary: {
      500: "#6200ee",
    },
  },
});

<NativeBaseProvider theme={theme}>
  <App />
</NativeBaseProvider>

<NativeBaseProvider>
  <Box _dark={{ bg: "black" }} _light={{ bg: "white" }}>
    <Text _dark={{ color: "white" }} _light={{ color: "black" }}>
      Hello
    </Text>
  </Box>
</NativeBaseProvider>

NativeBase به صورت built-in از responsive design پشتیبانی می‌کند:

<Box w={["100%", "50%", "25%"]}>
  Responsive Box
</Box>

✅ مزایا:

• سرعت توسعه بالا
• کامپوننت‌های آماده زیاد
• پشتیبانی از تم و Dark Mode
• مستندات خوب

❌ معایب:

• افزایش حجم اپ
• محدودیت در طراحی‌های خیلی خاص
• وابستگی به کتابخانه

🆚 مقایسه با سایر کتابخانه‌ها

🧠 چه زمانی از NativeBase استفاده کنیم؟

• وقتی می‌خواهید سریع MVP بسازید
• وقتی طراحی پیچیده ندارید
• وقتی می‌خواهید کد تمیز و قابل نگهداری داشته باشید

🏁 جمع‌بندی

کتابخانه NativeBase یکی از بهترین گزینه‌ها برای ساخت سریع و حرفه‌ای رابط کاربری در React Native است. اگر به دنبال توسعه سریع، طراحی استاندارد و کدنویسی ساده هستید، NativeBase می‌تواند انتخاب بسیار مناسبی باشد.