واجهة المستخدم
تنسيق واجهة المستخدم
أساليب تنسيق واجهة المستخدم في 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>
);
}الخطوة التالية
تعلم كيفية إضافة حركات وانتقالات لتطبيقك.