Question

react native支持web么

Answer 1

On1Key
React Native 项目运行在 Web 浏览器上面
React Native 的出现，让前端工程师拥有了使用 JavaScript 编写原生 APP 的能力。相比之前的 Web app 来说，对于性能和用户体验提升了非常多。
但是 React Native 的代码只兼容两个平台（iOS 和 Android），并没有兼容 Web 端访问。这里是因为 Facebook 开发人员认为 Web 端天生兼容性就巨麻烦，而且平台差异性是注定存在而且也要保留的，所以 React Native 的目标是 Learn once, write anywhere ，而不是 Write once, run anywhere 。
然而 Write once, run anywhere 又是一个刚需。从产品还是用户的角度试想一下，APP 的安装成本还是很高的，如何让用户马上体验到你产品的功能再决定是否要安装？此外，尤其是重要的产品，除了 APP 客户端之外，还要有一套兜底的 Web 端以便用户在某些特殊场景下使用。React Native 可以让你写一份代码跑在两个平台，但是你却还要再写一份 Web 的一模一样的应用。就显得十分蛋疼了。
于是 React web 就出现了。
React Web 介绍
简单的一句话描述 React Web 就是：它帮你把 React Native 的组件做了一个 Web 端的实现，并提供相关打包工具，让你可以直接打包出一份可以跑在 Web 端的代码。
将 React Native 应用创建一个 Web 版的几个步骤
为了重点突出转换过程，这里使用 React Native init 的最简 Demo 来做实验（名字叫 Awes 代码在 https://github.com/taobaofed/demo/tree/gh-pages/react-web ）。 React Web 已经把 React Native 比较复杂的 UI Explorer Demo 跑起来了 ，所以只要你的代码能跑在 iOS 或者 Android 上面，你基本不用担心有什么组件上的问题。当然如果有，可以马上提 Issue 过来，我们有一个小组在支持 React web ：）。
第一步：安装 React web 并进行相关配置
这一步操作主要是安装 react-web 包以及相关依赖，并配置 webpack 打包脚本等。
为了简化这一步操作，我们开发了命令行工具 react-web-cli 只需要执行两行命令即可。同时命令行工具还支持启动调试服务器、打包等功能，在后面介绍。
安装 cli 工具：

npm install react-web-cli -g

安装配置 React web 等：

react-web init <当前项目目录>

执行完成之后，会在你项目目录下面 npm install 相关库，并自动创建 web/webpack.config.js 文件，里面有一份写好的配置。此时目录结构为：
.├── README.md├── android/├── index.android.js├── index.ios.js├── ios/├── package.json└── web/ └── webpack.config.js

第二步：添加入口文件并进行相关配置
每个项目都需要有一个入口文件，通常用来引入调用其他组件并初始化项目，比如 index.ios.js 表示 iOS 平台上的该项目的入口文件。为了符合 React Native 的文件命名规范，我们创建一个 index.web.js 作为入口文件，并且需要在 webpack 中指定该文件为入口文件。打开 web/webpack.config.js 文件，修改 config 变量：

var config = { paths: { src: path.join(ROOT_PATH, '.'), index: path.join(ROOT_PATH, 'index.web'), },};

然后我们创建 index.web.js 文件。这个文件其实跟 index.ios.js 非常像，只是略有不同。主要区别在于：iOS 只需要 AppRegistry.registerComponent('Awes', () => Awes); 即可让 Xcode 的 Native 代码接收处理你的 JS 代码，而 Web 端是需要插入到 DOM 节点中才可以用。因此我们需要在 index.web.js 最下面添加如下代码：

AppRegistry.registerComponent('Awes', () => Awes);if (Platform.OS == 'web') { var app = document.createElement('div'); document.body.appendChild(app); AppRegistry.runApplication('Awes', { rootTag: app });}

然后在最上面 require 部分需要引入 Platform 组件。这样配置部分就已经处理完成了，执行 react-web start 命令即可启动调试服务器啦！