React Native DOM 使用教程

React Native DOM 使用教程

react-native-domAn experimental, comprehensive port of React Native to the web.项目地址:https://gitcode.com/gh_mirrors/re/react-native-dom

React Native DOM 是一个实验性的项目，旨在将 React Native 的开发体验带到网页端，使开发者能够利用已有的React Native知识在Web上构建应用。本教程将引导您了解其基本的项目结构、启动文件以及配置文件的相关信息。

1. 项目目录结构及介绍

React Native DOM 采用 Lerna 管理的 mono-repo 结构，所有的子项目位于 packages 文件夹下。主要组件包括：

• react-native-dom - 核心库，是大部分使用者会直接接触的包。
• rnpm-plugin-dom - 这个RNPM插件主要用于向React Native项目中引入DOM支持的初始化设置。
• rndom-* - 一系列使用Svelte构建的自定义Web组件，用于实现React Native DOM中的内置小部件或视图。

值得注意的是，定制版的瑜伽（Yoga）引擎不在这个monorepo内，因其需要不同的构建环境，它单独存在另一个仓库 yoga-dom 中。

2. 项目的启动文件介绍

虽然具体的启动逻辑可能分散于多个脚本和配置文件中，但对开发者而言，关键的启动命令简化为：

• 初始化DOM支持并创建项目骨架：通过运行 react-native dom 命令来完成。
• 启动项目：可以手动执行 react-native start 并在浏览器访问 localhost:8081/dom，或者直接使用 react-native run-dom 自动化这一过程，后者会同时启动打包服务器并打开正确的URL。

3. 项目的配置文件介绍

React Native DOM的配置较为依赖于.babelrc、metro.config.js等传统React Native项目中常见的配置文件，但它也引入了一些特定于DOM平台的配置调整。例如，当你需要编译针对DOM的JS线程时，可能会使用到类似于以下命令的配置指定：

react-native bundle \
    --config $(pwd)/rn-cli config js \
    --dev false \
    --platform dom \
    --entry-file /dom/bootstrap.js \
    --assets-dest /dom/dist \
    --bundle-output /dom/dist/bootstrap.bundle \
    ...

这表明配置不仅限于单一文件，而是一个综合了命令行参数和潜在的内部配置文件（如Babel配置和Metro Bundler的设置）的过程。

请注意，为了确保正确无误地进行DOM集成，特别是在遇到错误时，开发者可能需要至少一次使用 --reset-cache 参数重新启动打包服务。

综上所述，尽管详细的配置细节需参考项目源码和说明文档，理解这些基础流程和关键配置点对于快速上手React Native DOM至关重要。通过遵循上述步骤和理解基本目录结构，您可以更顺利地进行Web环境下的React Native开发。

react-native-domAn experimental, comprehensive port of React Native to the web.项目地址:https://gitcode.com/gh_mirrors/re/react-native-dom