2017年我们团队就开始使用 ReactNative 开发了一些内部管理工具,由于性能及开发体验一般,老是碰到迷一样的问题我们几乎都快放弃使用了,后来随着设备性能的提升,以及框架本身的改进,很多问题得到了改善。如果你的业务合适,如今使用 ReactNative 来降低移动端开发成本将是一个不错的选择。

在实践过程中发现在适当的工程管理下,和原生配合的混合开发模式(原生导航、RN纯单页)ReactNative 页面作为详情页展示非常合适:比 H5 渲染更快、配合 CodePush 比 Flutter 更动态,现如今 ToB 业务中 80% 的页面都是由 RN 开发的。

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

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

  

ReactNative 的一些工程化阻碍的更多相关文章

  1. 前端工程化 - 剖析npm的包管理机制

    转自https://juejin.im/post/5df789066fb9a0161f30580c 现如今,前端开发的同学已经离不开 npm 这个包管理工具,其优秀的包版本管理机制承载了整个繁荣发展的 ...

  2. ReactNative入门 —— 动画篇(上)

    在不使用任何RN动画相关API的时候,我们会想到一种非常粗暴的方式来实现我们希望的动画效果——通过修改state来不断得改变视图上的样式. 我们来个简单的示例: var AwesomeProject ...

  3. ReactNative入门(安卓)——API(下)

    LayoutAnimation - layout动画 当布局发生改变时的动画模块,它有两个方法: 1. 最常用的方法是 LayoutAnimation.configureNext(conf<Ob ...

  4. ReactNative入门(安卓)——API(上)

    Alert - 弹窗 通过 Alert.alert() 方法调用唤起原生弹窗,点击会触发 onPress 回调(参考下方代码)并清除弹窗. import React, { AppRegistry, C ...

  5. React-Native 组件开发方法

    前言 React Native的开发思路是通过组合各种组件来组织整个App,在大部分情况下通过组合View.Image等几个基础的组件,可以非常方便的实现各种复杂的跨平台组件,不过在需要原生功能支持. ...

  6. React-Native 渲染实现分析

    前言 React Native与传统的HybirdApp最大区别就是抛开WebView,使用JSC+原生组件的方式进行渲染,那么整个App启动/渲染流程又是怎样的呢? React Native启动流程 ...

  7. React-Native 动画优化

    前言 动画对于客户端来说是非常重要的一部分,直接影响到应用的用户体验.前端对于动画优化通常使用CSS3样式来实现动画,以利用GPU加速特性.而React-Native由于渲染模式的不同,无法使用CSS ...

  8. React-Native学习系列(一)

    近段时间一直在忙,所以博客也没有更新,这两天我翻了一下写的这几篇博客,感觉写的都很片面,所以,我想重新写一个系列教程,从最基础的开始,来让大家更容易学会React-Native. 这个系列大部分只介绍 ...

  9. react-native ListView使用详解

    刚好今天七夕,呆萌的程序猿没有妹纸,刚好发小明天结婚,我还在异地,晚上还要苦逼的赶火车.趁着下午比较闲,更新一下Blog,也算是在百无聊赖之时给众多单身程序猿们的小福利吧,虽然已经好久没更了...囧 ...

  10. react-native的tabbar和navigator混合使用

    前段时间搭建项目使用了navigator和react-native-tab-navigator,现在我教大家搭建一个通用的简单框架. 先把几张图贴在这里,这就是我们今天要搭建的东西,别看页面简单,但是 ...

随机推荐

  1. 微信小程序自定义导航栏机型适配

    自定义微信小程序头部导航栏,有几种方式 方式一 { "navigationStyle": "custom" // 将navigationStyle从默认defa ...

  2. vant组件,picker时间选择,自定义时间选择,实现datePacker,时间选择长期,增加长期选项,用于选择身份证到期时间等...

    vant组件,picker时间选择,自定义时间选择,实现datePacker,时间选择长期,增加长期选项,用于选择身份证到期时间等... 最近项目中有个需求,datePicker选项,需要实现增加一个 ...

  3. 【NOI2014】随机数生成器

    代码 #include<cstdio> using namespace std; typedef long long LL; const int N = 5000; int n , m , ...

  4. Quartz.Net 主要概念介绍和吐槽

    我们经常遇到需要定时执行某些任务的情况,比如清理缓存.异步结果轮询等,如果不打算造轮子,那么选择一款合适的定时任务组件就很关键了.所幸,.Net 世界中的选项并不多:) 选型 主要有以下四款: Qua ...

  5. redis(4)String字符串

    前言 Redis中有5大数据类型,分别是字符串String.列表List.集合Set.哈希Hash.有序集合Zset,本篇介绍Redis的字符串String Redis字符串 String是Redis ...

  6. Gridea,一个小而美的博客梦想桥梁

    欢迎到我自己搭建的博客查看最新最全的这篇文章,效果更佳- 备注:本文叙述操作过程非常详细,会稍现冗长,可以适当的跳读. 引子 相信大家应该已经非常了解GitHub pages了,他是一个基于githu ...

  7. 【redis】配置优化及从库优先级

    https://blog.51cto.com/u_15902893/5912902 vim /etc/redis/redis.conf ##################基础############ ...

  8. C++调用C#DLL并调试

    使用C++ 来调用C#DLL 并且调试程序 环境:使用VS studio 2019 C#项目的设置 1.C# -> 属性 -> 应用程序 -> 目标框架 ->.NET Fram ...

  9. Java--判空方法

    方法有StringUtils.isBlank() , StringUtils.isNotBlank() , StringUtils.isEmpty(); 使用关系 StringUtils.isNotE ...

  10. iOS开发 性能优化

    1.快 2.稳 3.省 4.小