美文网首页
React Native Web——使用 RN 开发 App 和

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

作者: 扬仔360 | 来源:发表于2019-05-29 14:16 被阅读0次

    打造一个 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 三个集成一个项目里的这个需求了,但是想法和积累还是有一些。
    欢迎讨论,如果你有这方面的需要和想法。

    相关文章

      网友评论

          本文标题:React Native Web——使用 RN 开发 App 和

          本文链接:https://www.haomeiwen.com/subject/pxcytctx.html