الخبير
واجهة المستخدم

تنسيق واجهة المستخدم

أساليب تنسيق واجهة المستخدم في React Native مع NativeWind

تنسيق واجهة المستخدم

تعرف على أفضل طرق تنسيق تطبيقات React Native باستخدام NativeWind (Tailwind CSS لـ React Native).

تثبيت NativeWind

npx expo install nativewind tailwindcss react-native-css-interop

الاستخدام

import { View, Text } from 'react-native';

export default function Card() {
  return (
    <View className="bg-purple-900/20 rounded-xl p-4 border border-purple-500/20">
      <Text className="text-white text-lg font-bold">عنوان البطاقة</Text>
      <Text className="text-gray-400 mt-2">وصف البطاقة</Text>
    </View>
  );
}

الخطوة التالية

تعلم كيفية إضافة حركات وانتقالات لتطبيقك.

On this page