use-dom
تشغيل أكواد الويب في ويبفيوز Expo
مكتبات React الخاصة بالويب مثل المخططات البيانية، وأدوات تمييز الصيغة، ومحررات النصوص الغنية لا يمكنها العمل مباشرة في React Native. توفر هذه المهارة نمط مكونات Expo DOM لتشغيل أكواد الويب في ويبفيوز على الأجهزة الأصلية بينما يتم عرضها كما هي على الويب، مما يتيح الترحيل التدريجي من الويب إلى التطبيق الأصلي.
스킬 ZIP 다운로드
Claude에서 업로드
설정 → 기능 → 스킬 → 스킬 업로드로 이동
토글을 켜고 사용 시작
테스트해 보기
"use-dom" 사용 중입니다. Create a DOM component that displays a chart using recharts
예상 결과:
- // components/Chart.tsx
- "use dom";
- import { LineChart, Line, XAxis, YAxis, Tooltip } from 'recharts';
- interface Props {
- data: Array<{ name: string; value: number }>;
- dom?: import('expo/dom').DOMProps;
- }
- export default function Chart({ data }: Props) {
- return (
- <LineChart width={400} height={300} data={data}>
- <XAxis dataKey="name" />
- <YAxis />
- <Tooltip />
- <Line type="monotone" dataKey="value" stroke="#8884d8" />
- </LineChart>
- );
- }
"use-dom" 사용 중입니다. How do I pass data from native to a DOM component?
예상 결과:
Pass data as serializable props (strings, numbers, booleans, arrays, plain objects). The DOM component receives these props and can use them directly. For functions, pass async functions as props to enable communication back to native.
"use-dom" 사용 중입니다. What is the dom prop for?
예상 결과:
The dom prop configures the webview behavior. Common options include: scrollEnabled (disable body scrolling), contentInsetAdjustmentBehavior (control safe area insets), and style (set explicit dimensions). On web, this prop is ignored.
보안 감사
안전All 63 static findings are false positives. Detected patterns are markdown formatting (backticks for inline code) and TypeScript type annotations (import() for type references) in documentation examples. No executable code with security implications present.
품질 점수
만들 수 있는 것
إضافة المخططات البيانية وتصور البيانات
استخدام مكتبات المخططات مثل recharts أو chart.js لعرض تصورات البيانات التي تتطلب واجهات برمجة تطبيقات DOM غير متاحة في React Native.
ترحيل مكونات React Web
جلب مكونات React الموجودة من مشروع ويب إلى تطبيق Expo دون إعادة كتابتها، وتشغيلها في ويبفيوز على الأجهزة الأصلية.
عرض الكود مع تمييز الصيغة
عرض كتل الكود مع تمييز الصيغة باستخدام مكتبات مثل react-syntax-highlighter التي تعتمد على عرض DOM.
이 프롬프트를 사용해 보세요
أنشئ مكون DOM يُسمى 'Chart' يستخدم recharts لعرض مخطط خطي. يجب أن يقبل المكون prop 'data' مع مصفوفة من كائنات { name: string; value: number }. قم بتضمين تنسيق TypeScript مناسب لـ prop dom.أنشئ مكون DOM يمكنه استدعاء دوال أصلية. يجب أن يحتوي المكون على prop 'onSubmit' وهي دالة غير متزامنة تأخذ سلسلة وتُرجع قيمة منطقية. أظهر كيفية تمريرها من العنصر الأصلي.
أنشئ مكون DOM يستخدم CSS للتنسيق. أظهر كيفية استيراد ملف CSS وتطبيق الأنماط على العناصر. كذلك أظهر كيفية استخدام الأنماط المضمنة كبديل.
أنشئ مكون DOM يستخدم expo-router للتنقل. أظهر كيفية تمرير معلمات المسار من العنصر الأصلي حيث أن useLocalSearchParams لا تعمل مباشرة في مكونات DOM.
모범 사례
- احتفظ بمكونات DOM مركزة على وظائف محددة بدلاً من بناء شاشات كاملة
- استخدم المكونات الأصلية للتنقل chrome وتمرير معلمات المسار كـ props لمكونات DOM
- ضمّن الأصول باستخدام require() بدلاً من استخدام مجلد public لتحسين التجميع
- ختبر مكونات DOM على جميع المنصات المستهدفة حيث قد يتم عرض الويب وويبفيوز الأصلية بشكل مختلف قليلاً
피하기
- وضع شاشات التطبيق بالكامل داخل الويبفيوز - هذا يُبطل الغرض من React Native
- نسيان توجيه 'use dom' - لن يعمل المكون بدونه
- استخدام واجهات برمجة تطبيقات الوحدات المحلية داخل مكونات DOM - خطافات Router مثل useLocalSearchParams تتطلب وصولاً أصلياً
- مشاركة الحالة بين الأصلي والويبفيوز - لديهما سياقات JavaScript معزولة