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

2019-05-29  本文已影响0人  扬仔360

打造一个 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以上版本所需的第三方编译库

补充说明:

由于一些非技术原因,我调研了多方面的东西,暂时研发中心不放在 React、React Native、Dva 三个集成一个项目里的这个需求了,但是想法和积累还是有一些。
欢迎讨论,如果你有这方面的需要和想法。

上一篇下一篇

猜你喜欢

热点阅读