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