use-dom
Exécuter du code Web dans les Webviews Expo
Les bibliothèques React uniquement Web comme les graphiques, les surligneurs de syntaxe et les éditeurs de texte enrichi ne peuvent pas s'exécuter directement dans React Native. Cette compétence fournit le pattern de composants DOM Expo pour exécuter du code Web dans une webview sur les appareils natifs tout en effectuant un rendu tel quel sur le Web, permettant une migration progressive du Web vers le natif.
스킬 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.
품질 점수
만들 수 있는 것
Ajouter des graphiques et visualisation de données
Utiliser des bibliothèques de graphiques comme recharts ou chart.js pour afficher des visualisations de données qui nécessitent des API DOM non disponibles dans React Native.
Migrer des composants React Web
Intégrer des composants React existants d'un projet Web dans une application Expo sans réécriture, en les exécutant dans une webview sur natif.
Afficher du code avec surlignage de syntaxe
Afficher des blocs de code avec surlignage de syntaxe en utilisant des bibliothèques comme react-syntax-highlighter qui dépendent du rendu DOM.
이 프롬프트를 사용해 보세요
Créer un composant DOM appelé 'Chart' qui utilise recharts pour afficher un graphique en ligne. Le composant doit accepter une prop 'data' avec un tableau d'objets { name: string; value: number }. Inclure le typage TypeScript approprié pour la prop dom.Créer un composant DOM qui peut appeler des fonctions natives. Le composant doit avoir une prop 'onSubmit' qui est une fonction async prenant une chaîne de caractères et retournant un booléen. Montrer comment passer ceci depuis le parent natif.
Créer un composant DOM qui utilise CSS pour le style. Montrer comment importer un fichier CSS et appliquer des styles aux éléments. Montrer également comment utiliser les styles en ligne comme alternative.
Créer un composant DOM qui utilise expo-router pour la navigation. Montrer comment passer les paramètres de route depuis le parent natif car useLocalSearchParams ne fonctionne pas directement dans les composants DOM.
모범 사례
- Gardez les composants DOM concentrés sur des fonctionnalités spécifiques plutôt que de construire des écrans entiers
- Utilisez des composants natifs pour le chrome de navigation et passez les params de route en tant que props aux composants DOM
- Bundlez les actifs avec require() au lieu d'utiliser le répertoire public pour un meilleur bundling
- Testez les composants DOM sur toutes les plateformes cibles car le Web et les webviews natives peuvent rendre légèrement différemment
피하기
- Mettre des écrans d'application entiers dans des webviews - cela va à l'encontre du but de React Native
- Oublier la directive 'use dom' - le composant ne fonctionnera pas sans elle
- Utiliser des API de modules locaux à l'intérieur des composants DOM - les hooks de router comme useLocalSearchParams nécessitent un accès natif
- Partager l'état entre natif et webview - ils ont des contextes JavaScript isolés