zoukankan      html  css  js  c++  java
  • React-Native的一些工程化阻碍

      2017年我们团队开始使用ReactNative开发了一些内部管理工具,由于体验一般,加上老是迷一样的问题我们几乎都快放弃使用了。但后来因为原生端人手不够(哭),又必须使用React-Native来降低移动端开发成本,在实践过程中发现在适当的工程管理下,和原生配合的混合开发模式(原生导航、RN纯单页)ReactNative页面作为详情页展示非常合适:比H5渲染更快、配合CodePushFlutter更动态,现如今ToB业务中80%的页面都是由RN开发的。

    ReactNative真香是真的,问题多也是真的,我们在早期探索过程中遇到了一个又一个问题,在这里总结一下,虽然不是很全面,但也希望能帮到一些刚接触的同学。

    iOS工程依赖的问题

    iOS使用CocoaPods做为依赖工具,我们希望把ReactNative工程作为一个单独的pod组件依赖进主工程,主工程就不需要依赖ReactNative开发环境了,好在ReactNative各个组件和模块都提供了podspec文件,使用的时候只需要将podspec转为json格式,然后上传至私有pod仓库即可,注意,这里podspec为私有的,但实际的依赖文件还是会从GitHub下载。下面是我们的RN工程的podspec:

    package = JSON.parse(File.read(File.expand_path('../package.json', __dir__)))
    dependencies = package['dependencies']
    react_native_version = dependencies['react-native']
    react_native_svg_version = dependencies['react-native-svg']
    react_native_code_push = dependencies['react-native-code-push']
    
    Pod::Spec.new do |spec|
    
        spec.name         = "YOU PROJECT NAME"
        spec.version      = "0.0.1"
        spec.summary      = "XXXX for ReactNative"
    
        spec.description  = "XXXX for ReactNative"
    
        spec.homepage     = "https://gitlab.xxxx.com/app-rn/XXXX"
        spec.license          = { :type => 'MIT', :file => 'LICENSE' }
        spec.author             = { "liujixin" => "XXXX@email.com" }
        spec.source       = { :git => "https://gitlab.xxxx.com/app-rn/xxxx.git", :tag => "#{spec.version}" }
        spec.ios.deployment_target = '9.0'
    
        # 业务原生代码
        spec.source_files  = "ios/XXXX/Classes/**/*"
        spec.resources = "ios/XXXX/Assets/*"
    
        # React
        spec.dependency 'React/Core', react_native_version
        spec.dependency 'React/CxxBridge', react_native_version
        spec.dependency 'React/DevSupport', react_native_version
        spec.dependency 'React/RCTText', react_native_version
        spec.dependency 'React/RCTNetwork', react_native_version
        spec.dependency 'React/RCTWebSocket', react_native_version
        spec.dependency 'React/RCTAnimation', react_native_version
        spec.dependency 'React/RCTImage', react_native_version
        spec.dependency 'React/RCTPushNotification', react_native_version
        spec.dependency 'React/RCTLinkingIOS', react_native_version
        spec.dependency 'React/RCTActionSheet', react_native_version
    
    
        # 第三方依赖,如果官方specs没有对应版本,需要将对应版本podspec文件上传至您的私有repo
        spec.dependency 'glog', '0.3.5'
        spec.dependency 'DoubleConversion', '1.1.6'
        spec.dependency 'Folly', '2018.10.22.00'
        spec.dependency 'yoga', '0.59.5'
        spec.dependency 'RNSVG', react_native_svg_version
        spec.dependency 'CodePush', react_native_code_push
        spec.dependency 'BVLinearGradient', dependencies['react-native-linear-gradient']
        spec.dependency 'RNViewShot', dependencies['react-native-view-shot']
    
    end

    无法解析本地模块的问题:

    在使用ReactNative几个月后,陆续开发了很多页面,也积累了一些组件,在组件开发过程中,发现一个非常蛋疼的问题。就是ReactNative的打包器不支持本地包,如果你使用 "package": "./file/src" 这种方式引入包,会直接报:

    Unable to resolve module `XXXX` from `XXX.js`: XXXX could not be found within the project.

    查了一下,symlinks在ReactNative中就是不起作用啊我晕 (issues),这还怎么玩,总不至于写完再手动拷贝到node_modules吧。

    手动不可靠也不现实,但是有人就想到了自动拷贝,也算是一种曲线救国的临时方案吧。

    wml是一个帮你自动同步文件的工具,基于fb的watchman,使用简单,大家可以试一下,在开发组件时,把开发目录的包自动同步到example工程的node_modules下,这样就可以愉快的调试了。

    推荐直接安装在本地,然后配置一下启动wml监听脚本方便使用:

    {
      "name": "examples",
      "version": "0.0.1",
      "private": true,
      "scripts": {
        "android": "react-native run-android",
        "ios": "react-native run-ios",
        "start": "react-native start",
        "wml-start": "node ./node_modules/wml/src/cli/index.js add ../src ./node_modules/react-native-module/src && node ./node_modules/wml/src/cli/index.js start",
        "wml-stop": "node ./node_modules/wml/src/cli/index.js stop",
        "test": "jest",
        "lint": "eslint ."
      },
    }

    另外需要注意的是wml依赖watchman,所以必须先安装watchman,Mac用户直接用Homebrew安装即可。

    brew install watchman

    Windows稍微麻烦点,除了手动安装配置环境变量之外,还需注意是否缺少dll,另外在启动wml之前,Windows用户需要手动把wml安装目录加入watchman的监听:

    watchman watch /Users/youname/.nvm/versions/node/v8.9.0/lib/node_modules/wml/src

      

  • 相关阅读:
    javascript base64 encode decode 支持中文
    php laravel v5.1 消息队列
    Linux C语言 取得MTU (最大传输单元)
    javascript 字符串 数字反转 字母大小写互换
    为Python安装Redis库
    php 日期相关的类 DateInterval DateTimeZone DatePeriod
    php安全 过滤、验证、转义
    python学习笔记之---多种方式实现list去重
    Python函数重载机制?
    说说下面几个概念:同步,异步,阻塞,非阻塞?
  • 原文地址:https://www.cnblogs.com/liujixin/p/11985642.html
Copyright © 2011-2022 走看看