React-Native的一些工程化阻碍

Posted liujixin

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了React-Native的一些工程化阻碍相关的知识,希望对你有一定的参考价值。

  2017年我们团队就开始使用ReactNative开发了一些内部管理工具,由于各种问题,我们几乎都快放弃使用了。但后来因为原生端人手不够(哭),又重拾使用React-Native开发了一些页面,发现在和原生的混合开发模式(原生导航、RN纯单页)下,ReactNative页面作为详情页展示非常合适:比H5渲染更快、配合CodePush比Flutter更动态、比原生开发成本更低。但是...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下,这样就可以愉快的调试了。

  

以上是关于React-Native的一些工程化阻碍的主要内容,如果未能解决你的问题,请参考以下文章

react-native修改xcode项目名

“ES7 React/Redux/GraphQL/React-Native 片段”不适用于 javascript 文件。除了安装它,我还需要配置其他东西吗?

数学不好,又想学习编程,数学天赋会不会阻碍我成为优秀的工程师?TM...

高仿京东Android App,集成React-Native热更

软件工程(2018)第二次结对作业

React-Native工程项目打包编译发布过程详解