使用Reaction Native for Web在Web上运行您的Reaction Native应用程序
“REACTION Native for Web”使得使用REACTION DOM在Web上运行REACT原生组件和API成为可能--允许您使用单个代码库来瞄准Android、iOS和Web平台。
Reaction Native for Web文档提供了几个如何从头开始的示例。例如，您可以使用EXPO或Create-Reaction-Native-app创建与Reaction Native for Web兼容的新React Native项目。或者，您也可以使用创建Reaction App来生成一个简单的、仅限Web的Reaction应用程序，并内置对Reaction Native for Web的支持。
在这篇文章中，我想采用一种不同于REACTION Native for Web文档中的方法：我将解释如何使用创建REACT App将REACTION Native for Web添加到现有的REACT Native应用程序中。
使用创建反应应用从头开始设置反应应用的标准方式是使用创建-反应-应用程序CLI来生成整个项目。然而，在我们的示例中，我们在现有项目之上添加了一个Reaction应用程序，因此设置过程将有所不同。
#如果您正在使用NPM...NPM安装REACT-NATIVE-WEB REACT-SCRIPTS REACTION-DOM...或者，如果您正在使用YARNYAING ADD REACT-NATIVE-WEB REACT-SCRIPTS REACTION-DOM。
Reaction-Native-Web是Reaction Native for Web库。它提供了Reaction原生组件和API到其Web对应物的映射。
反应脚本是创建反应应用程序用来捆绑和运行Web应用程序的脚本。
Reaction-dom允许Reaction在网络上运行。建议安装与您当前安装的Reaction版本相匹配的Reaction DOM版本。
根据您当前的Reaction Native设置的外观，您可能需要进行一些更改以适应Create Reaction App约定。
接下来的步骤将假设您使用的目录结构类似于以下内容：
├──android/│└──...├──IOS/│└──...├──src/│├──App.js#您的React本机应用程序的根组件│└──...└──index.js#在其中调用Reaction本机注册表组件。
Public/index.html：提供给用户的HTML页面模板。创建Reaction应用程序将在此页面中插入您的Reaction应用程序。
通常，这些文件由创建-反应-应用程序命令行界面…生成。但是由于我们不能使用它，我们需要更进一步，手动创建它们。
在项目的根目录下创建一个名为public的新目录。我们将在其中放入index.html文件及其使用的所有附加文件。
要创建其内容，您可以a)将create-action-app CLI生成的内容复制并粘贴到public目录中，或者b)仅创建如下所示的最小public/index.html文件：
从"；REACT-NATIVE"；导入{App}；从"；./App.js"；；const appName="；您的应用名称"；；AppRegistry导入{AppRegistry}。RegisterComponent(appName，()=>；App)；AppRegistry。RunApplication(appName，{//在index.html rootTag：document的"；root"；div中装载Reaction本地应用程序。GetElementById("；root"；)，})；
这是将注入到HTML文件中的JavaScript代码的入口点。
您可能已经注意到，您现在有两个不同的index.js文件-一个在项目的根目录中，另一个在src目录中。
Metro捆绑程序--这是构建您的Reaction Native应用程序的JavaScript捆绑程序--将使用您在项目根目录中已有的index.js文件来构建Android/iOS应用程序。Webpack-由create action App在幕后使用-将使用新的src/index.js。
为了更明确地说明在特定平台上使用的是哪个JS索引文件，我建议将根index.js文件重命名为index.native.js。有关特定于平台的扩展的更多详细信息，请参阅官方的Reaction-Native文档。
要完成Create Reaction App设置，请将两个脚本添加到您的Package.json以构建您的Web应用程序：
现在，您可以使用NPM run web：start启动Web应用程序的开发环境，使用NPM run web：build创建生产版本。默认情况下，create act App的默认配置已经将所有的REACT-NATIVE导入别名为REACT-NATIVE-Web，因此您不必担心必须根据目标平台手动交换它们。
也就是说，除非你非常幸运，否则你不能在第一次试用…时在网络上运行你的Reaction Native应用程序。
第一次运行Web应用程序时，您可能会在控制台中看到以下警告：
项目依赖关系树可能有问题。这可能不是Create Reaction App中的错误，而是您需要在本地修复的问题。Create Reaction App提供的Reaction脚本包需要依赖项："；babel-jest"；："；^26.6.0"；Don'；不要尝试手动安装：您的包管理器会自动安装。但是，在树的较高位置检测到了不同版本的babel-jest：/Users/username/workspace/YourProject/node_modules/babel-jest(版本：25.5.1)手动安装不兼容的版本会导致难以调试的问题。如果您希望忽略此检查，请将SKIP_PREFIST_CHECK=TRUE添加到项目中的.env文件中。这将永久禁用此消息，但您可能会遇到其他问题。
之所以会出现此警告，是因为React Native附带了一个版本的babel-jest(或其他包，取决于您的警告所说的内容)，该版本与create react App使用的版本不同。
警告本身将为您指出几个可能的修复。我建议您尝试以下两个选项：
通过将SKIP_PREFIX_CHECK=TRUE添加到项目根目录下的.env文件来忽略此检查。这将强制Reaction-Script使用您的Package.json中设置的依赖项版本，而不是创建Reaction App所需的依赖项版本。大多数时候，这些错误是由Babel-Jest或Jest的稍微不同的版本引起的-Jest或Jest仍然可以与您在Reaction Native应用程序中使用的版本兼容-这就是为什么这个解决方案可能会起作用。
或者卸载被牵连的依赖项，然后再次运行NPM安装或纱线安装。这将使您的Reaction Native应用程序使用Create Reaction App附带的依赖项。
无论您在这里做出什么选择，当您将来将项目更新到新版本的Reaction Native或Reaction-Script时，应该测试是否存在回归，这一更改就是其中之一。
Reaction Native for Web与许多随Reaction Native一起提供的本地模块兼容：按钮、视图、文本输入等…。从本机Reaction导入时，将自动正确映射到其Web对等项。不幸的是，使用其他外部本机库(如REACTION-Native-Sound或REACTION-Native-Keep-Awing)可能有点碰运气，因为许多本机功能在Web上不可用。
在这些情况下，您的Web应用程序将无法编译，并出现诸如找不到模块之类的错误。
Reaction Native“特定于平台的代码”文档提供了一些关于如何运行特定于平台的代码并解决这些问题的很好的提示。
我的建议是将这些本机库抽象到具有特定于平台的扩展名的文件中，以便只有REACTION Native捆绑器才会导入它们。
例如，假设您只想在您的Reaction Native应用程序中使用由REACT-NATIVE-KEEP-AWAING导出的KeepAwac组件，则应创建两个文件：
一个文件，其中包含在名为KeepAwake.native.js的本机应用程序上运行的代码，该应用程序只是充当REACTION-NATIVE-KEEP-ACEWING库的代理：
包含在Web上运行的名为KeepAwake.js的代码的文件，可导出模拟/空组件：
通过遵循此策略，您现在可以忽略扩展导入模块(从"；./KeepAwac"；；导入KeepAwac)。正确的文件将由Create Reaction App和Reaction Native捆绑程序自动拾取。
您可能已经熟悉了.android.js和.ios.js扩展名。这个概念基本上是以相同的方式工作的，通过使用.native.js扩展名作为后缀，将在Web上运行的代码与运行本机应用程序的代码区分开来。
最终，您可能需要自定义项目，而不是Create Reaction App所允许的功能。这些自定义中的大多数可能只是对Create Reaction应用程序的webpack和巴别尔配置的微小更改，其中弹出会被过度使用-这就是为什么您可能希望使用诸如REACT-APP-REWIRWED、CUSTOM-CRA或CRACO这样的命令来应用这些更改而不弹出。
您要应用于创建React App的最初几个自定义之一是在Web上添加对__dev__关键字的支持。当您使用React本地应用时，React Native捆绑程序在开发模式下将全局__dev__变量设置为true，而Create React App使用process.env.NODE_ENV来确定Web应用是否在开发/生产中运行。
为了获得统一的开发体验，让您的web应用知道__dev__，我们可以使用reaction-app-rewire+Customize-cra来更改创建reaction应用的webpack配置，正确设置__dev__变量。
#如果您正在使用NPM...。NPM Install-S Customize-CRA RECTION-APP-REWIWED#...或者，如果您正在使用纱线，请添加Customize-CRA RECTIVE-APP-REWIRIRED#...。
然后在项目的根目录下创建一个config-overrides.js文件。Reaction-APP-REWIRWED+Customize-CRA将使用它来应用定制来创建Reaction App：
Const webpack=Required("；webpack"；)；const{Override，addWebpack Plugin}=Required("；Customize-CRA&34；)；Module.exports=Override(addWebpack Plugin(new({"；process.env.NODE_ENV"；：json.。Stringify(进程.env.。NODE_ENV||"；开发"；)，//增加对__DEV__全局变量__DEV__：process.env的支持。NODE_ENV="；生产"；||true，})；
要激活这些定制，请更新您对Package.json中的反应脚本的现有调用，以改用REACT-APP-REWIRWED：
Create Reaction App支持TypeScript。如果您的Reaction Native是用TypeScript编写的，您只需要确保您的.tsconfig遵循创建Reaction应用程序TypeScript模板中使用的相同规则。
的确，创建一个Reaction Native for Web项目可能不像创建一个Web应用程序那么容易。但在某些情况下，付出的努力绝对是值得的：归根结底，您仍然需要使用单个代码库构建一个本地应用程序和一个Web应用程序。我认为这里设置的复杂性是绝对合理的。
