ReactNative 的一些工程化阻碍
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
最新文章
- 关于ubuntu16.04中mysql root登陆不了的情况下(大多是未设置密码的情况)
- python2 与 python3 urllib的互相对应关系
- DataSet,DataTable与DataRow的复制方法
- OpenStreetMap/Google/百度/Bing瓦片地图服务(TMS)
- C#结构
- Linux iptables
- 数据库防火墙如何防范SQL注入行为
- 用 React 编写2048游戏
- Awesome Algorithms
- Python 番外 消息队列设计精要
- SERVICE_USE_PID
- ASP.NET Core Web 资源打包与压缩
- C++的string类
- 机器学习基石:01 The Learning Problem
- RxJava 2.x 使用最佳实践
- docker其他参考资料
- 从零开始学 Web 之 ES6(二)ES5的一些扩展
- Activiti Modeler初探实践
- linux 常用find
- 细化Azure RBAC权限