use-dom
Запуск веб-кода в Expo Webviews
Веб-библиотеки React, такие как графики, подсветка синтаксиса и Rich Text редакторы, не могут работать напрямую в React Native. Этот навык предоставляет паттерн компонентов Expo DOM для запуска веб-кода в webview на нативных устройствах, при этом рендеринг остаётся как есть на вебе, что позволяет осуществлять постепенную миграцию с веба на натив.
스킬 ZIP 다운로드
Claude에서 업로드
설정 → 기능 → 스킬 → 스킬 업로드로 이동
토글을 켜고 사용 시작
테스트해 보기
"use-dom" 사용 중입니다. Создайте компонент DOM, который отображает график с использованием 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" 사용 중입니다. Как передать данные из натива в компонент DOM?
예상 결과:
Передавайте данные как сериализуемые пропсы (строки, числа, булевы значения, массивы, простые объекты). Компонент DOM получает эти пропсы и может использовать их напрямую. Для функций передавайте асинхронные функции как пропсы для возможности коммуникации обратно в натив.
"use-dom" 사용 중입니다. Для чего нужен проп dom?
예상 결과:
Проп dom настраивает поведение webview. Распространённые опции включают: scrollEnabled (отключить прокрутку body), contentInsetAdjustmentBehavior (управление отступами safe area) и style (установить явные размеры). На вебе этот проп игнорируется.
보안 감사
안전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 API, недоступных в React Native.
Миграция веб-компонентов React
Перенесите существующие React компоненты из веб-проекта в приложение Expo без переписывания, запуская их в webview на нативных устройствах.
Отображение кода с подсветкой синтаксиса
Отображайте блоки кода с подсветкой синтаксиса, используя библиотеки вроде react-syntax-highlighter, которые зависят от DOM рендеринга.
이 프롬프트를 사용해 보세요
Создайте компонент DOM под названием 'Chart', который использует recharts для отображения линейного графика. Компонент должен принимать проп 'data' с массивом объектов { name: string; value: number }. Включите правильную типизацию TypeScript для пропа dom.Создайте компонент DOM, который может вызывать нативные функции. Компонент должен иметь проп 'onSubmit', который является асинхронной функцией, принимающей строку и возвращающей булево значение. Покажите, как передать это из нативного родителя.
Создайте компонент DOM, который использует CSS для стилизации. Покажите, как импортировать CSS файл и применять стили к элементам. Также покажите использование inline стилей как альтернативы.
Создайте компонент DOM, который использует expo-router для навигации. Покажите, как передать параметры маршрута из нативного родителя, поскольку useLocalSearchParams не работает напрямую в компонентах DOM.
모범 사례
- Сохраняйте компоненты DOM сфокусированными на конкретной функциональности, а не создавайте целые экраны
- Используйте нативные компоненты для навигационной оболочки и передавайте параметры маршрута как пропсы в компоненты DOM
- Подключайте ассеты с помощью require() вместо использования публичной директории для лучшей сборки
- Тестируйте компоненты DOM на всех целевых платформах, так как веб и нативные webview могут рендериться немного по-разному
피하기
- Размещение целых экранов приложения внутри webview - это противоречит цели React Native
- Забывание директивы 'use dom' - компонент не будет работать без неё
- Использование API локальных модулей внутри компонентов DOM - хуки роутера, такие как useLocalSearchParams, требуют нативного доступа
- Разделение состояния между нативом и webview - у них изолированные JavaScript контексты