React Native 老项目转 Web #

1. 安装 QRN-Web #

package.json 中新增 qrn-web 的安装路径:

{
  "dependencies": {
    "qrn-web": "git+ssh://git@gitlab.corp.qunar.com:react_native/qunar_react_native.git#internal-web-v1.5.0"
  }
}

执行 qnpm install(请确保你对 react_native/qunar_react_native.git 拥有读权限),如果安装后出现问题,把 node_modules 删除了重新 qnpm install 一下:

注意:

  • 用于发布的项目,<span style="color="red">请使用 QRN Web 正式发布的 tag 替代分支名
  • 安装新版本后,请更新更新依赖组件,你可以看这里 对应表 更新依赖组件

2. 初始化项目 #

首先向 package.jsonscripts 字段中写入:

"scripts": {
  "qrn-web": "qrn-web"
}

然后执行以下命令:

$ npm run qrn-web init

执行完成后,会在根目录下会创建以下文件:

  • index.html:入口页面
  • index.jsp:后端发布,如果后端项目采用的是vm模板,需自行转换为vm模板
  • mock.conig.js:mock 数据的配置文件
  • index.yaml:用于发布离线包
  • build-web.sh:构建脚本(可以新增逻辑,不要修改既有逻辑)

3 .启动服务 #

npm run qrn-web start

请确保你已经将 qrn-web 写入了 package.json 中的 scripts 字段,如果没有写入可以使用 ./node_modules/.bin/qrn-web start 来启动。

4.打开浏览器 #

打开chrome,开启模拟器,输入 http://127.0.0.1:8082

也可以打开 http://localhost:8082/qrcode ,手机扫描二维码预览

创建新的 React Native 项目 #

1. 创建 QRN 项目 #

执行命令:

react-native init myProject --skip-android --skip-ios -t 需要执行 tag 或者 branch;
cd myProject

好了,后续步骤同 React Native 老项目转 Web。