什么是 react-native-web
react-native-web 是一个让你可以使用 react-native 开发 web 应用的 npm 包。它实现了 react-native 的基础组件和 API，同时在 web 上能够良好地运行，方便前端工程师们跨平台开发。
安装 react-native-web
你可以通过 npm 来安装 react-native-web：
npm install --save react-native-web
安装完成后，你可以在你的项目文件夹中找到 node_modules 文件夹，其中就有 react-native-web 的代码了。
使用 react-native-web
1. 创建项目
在使用 react-native-web 开发 web 应用之前，我们需要先创建一个 react-native 项目。可以通过以下命令创建一个新项目：
npx react-native init MyWebApp
其中，MyWebApp 是你的项目名称，你可以换成自己的名称。
2. 添加 react-native-web
在项目中添加 react-native-web，可以通过在项目根目录下安装：
npm install --save react-native-web
然后，你需要在项目根目录中添加一个名为 web 的文件夹，并在该文件夹中添加一个名为 index.js 的文件。并在该文件中添加以下代码：
import React from 'react';
import { AppRegistry } from 'react-native';
import App from '../App';
import { name as appName } from '../app.json';
AppRegistry.registerComponent(appName, () => App);
AppRegistry.runApplication(appName, { rootTag: document.getElementById('root') });接着，在项目的根目录中创建一个名为 index.html 的文件，在其中添加以下代码：
-- -------------------- ---- -------
--------- -----
----- ----------
------
----- ----------------
--------- --- -----------
----- --------------- ---------------------------- ---------------- ------------------
-------
------
---- ----------------
------- ------------------------------
-------
-------3. 编写代码
现在，我们可以开始编写我们的 web 应用了。在项目的 App.js 中，你可以添加一些代码，例如：
-- -------------------- ---- -------
------ ----- ---- --------
------ - ----------- ----- ---- - ---- ---------------
------ ------- -------- ----- -
------ -
----- -------------------------
----- ---------------------------------------
-------
--
-
----- ------ - -------------------
---------- -
----- --
---------------- -------
----------- ---------
--------------- ---------
--
----- -
--------- ---
----------- -------
--
---3. 打包和运行
在我们完成了以上步骤后，我们就可以将我们的代码打包了。可以在项目的根目录下添加一个名为 webpack.config.js 的文件，并添加以下代码：
-- -------------------- ---- -------
----- ---- - ----------------
----- ------- - -------------------
-------------- - -
------ -----------------
------- -
----- ----------------------- ------ --------
--------- ----------
----------- ---------
--
------- -
------ -
-
----- --------
-------- -
----------------------- ----------
----------------------- -------
--
------- ---------------
--
--
--
-------- -
------ -
--------------- -------------------
--
----------- ------- ---------
--
-------- -
--- ---------------------- -------- ---- ---
--
--然后，在终端中输入以下命令打包代码：
./node_modules/.bin/webpack --mode=production
之后，我们就可以在浏览器中运行和查看我们的 web 应用了。在终端中输入以下命令：
open ./web/index.html
此时，一个页面会在你的浏览器中展示，你可以看到字体大小为 30px，字体加粗的 “Hello，world！” 字样。
总结
在本文中，我们介绍了如何使用 npm 包 react-native-web 来开发 web 应用，同时也给出了具体的代码实例。希望这篇文章可以帮助你更好地了解 react-native-web，并能够在实际的开发中使用到它。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/react-native-web