React Native Web——使用 RN 开发 App 和 Web 应用

打造一个 React、React Native、Dva 三位一体的脚手架，提供公司项目使用。

本篇第一篇，比较简单，搭建一个 ReactNative、ReactNativeWeb 可运行的工程。

react-native-web这个工程的作者，是前Twitter前端工程师，作者使用React实现了大部分常用的ReactNative的组件，webpack运行时动态替换，使得RN代码可以运行在web端。

首先初始化RN工程，使用ReactNative init方法，具体参考RN官网即可。

$ sudo npm i -g react-native-cli
$ react-native init rnweb

第二部处理依赖包：
我的package.json 中的依赖只有：react、react-dom、react-native、react-scripts、react-native-web。

具体文件内容如下：

{
  "name": "rnwebdva",
  "version": "0.0.1",
  "private": true,
  "scripts": {
    "start": "node node_modules/react-native/local-cli/cli.js start",
    "ss": "react-scripts start",
    "test": "jest"
  },
  "main": "src/index.js",
  "dependencies": {
    "react": "16.8.3",
    "react-dom": "^16.8.6",
    "react-native": "0.59.8",
    "react-native-web": "^0.11.4",
    "react-scripts": "^3.0.1"
  },
  "browserslist": [
    ">0.2%",
    "not dead",
    "not ie <= 11",
    "not op_mini all"
  ]
}

本脚手架中没有webpack配置文件，使用默认配置。

运行本地服务使用 yarn ss 或 npm run ss。

期间 react-native run-ios的时候出现的问题，使用iOS RN 0.45以上版本所需的第三方编译库这篇文章解决了。

参考：

1. react-native-web、RN中文管网、webpack中文管网。
2. 一个由react-native、react-navigation、dva搭建的简易架子
3. 使用react-native-web将你的react-native应用H5化
4. iOS RN 0.45以上版本所需的第三方编译库