ReactNative 开发中问题解决小记

原生开发的主项目中的某个模块，计划用RN来实现。由于首次集成RN到项目中，遇到诸多问题，故小记如下：

---

1、利用子模块来包含RN项目依赖的类库

主项目代码利用gitlab来管理，集成RN模块，考虑到之后会有其他模块使用RN实现，可能存在多个RN项目使用共同类库，故计划将RN项目依赖使用的类库，也当作一个组件，放在gitlab来管理，iOS 工程和 Android 工程分别依赖这个子模块的方式来包含。

//子模块目录
_ XQRNComponent  
//忽略文件
└── .gitignore 
//管理项目的依赖项以及项目的元数据
└── package.json
//对项目的整个依赖树做锁定
└── package-lock.json

若在主项目中，XQRNComponent不存在

//初始化子模块（主工程目录）
git submodule init 
//更新子模块（主工程目录）
git submodule update 
//添加RN项目依赖的node的modules（主工程/XQRNComponent目录）
npm install 
//添加主项目库的依赖（主工程目录）
pod install 

---

2、解决 pod install 下载 GLog/Folly/DoubleConversion 太慢

• 1、提前将GLog.podspec、DoubleConversion.podspec、Folly.podspec、React.podspec下载好放在主目录下的某文件夹中（如 XQFix）
• 2、在主项目的podfile文件中

pod 'DoubleConversion', :podspec => './XQRNComponent/node_modules/react-native/third-party-podspecs/DoubleConversion.podspec'
pod 'GLog', :podspec => './XQRNComponent/node_modules/react-native/third-party-podspecs/Glog.podspec'
pod 'Folly', :podspec => './XQRNComponent/node_modules/react-native/third-party-podspecs/Folly.podspec'

• 3、利用shell脚本，在主目录下的script文件夹，创建以下脚本文件（fix_rn.sh），实现将.podspec移动到XQRNComponent目录下的/third-party-podspecs中。

#!/bin/sh
copy_thirdparty_specs_to_nodemodules() {
    cp ../fix/DoubleConversion.podspec  ../RNComponent/node_modules/react-native/third-party-podspecs
    cp ../fix/GLog.podspec  ../RNComponent/node_modules/react-native/third-party-podspecs
    cp ../fix/Folly.podspec  ../RNComponent/node_modules/react-native/third-party-podspecs
    cp ../fix/React.podspec ../RNComponent/node_modules/react-native
}
copy_thirdparty_specs_to_nodemodules

• 4、现在scripts目录下面执行脚本：

./fix_rn.sh

---

3、报错 native module cannot be null

podfile需要引入RCTLinkingIOS

 pod 'React', :path => './RNComponent/node_modules/react-native', :subspecs => [
    'Core',
    'CxxBridge', # Include this for RN >= 0.47
    'DevSupport', # Include this to enable In-App Devmenu if RN >= 0.43
    'RCTText',
    'RCTNetwork',
    'RCTImage',
    'RCTSettings',
    'RCTVibration',
    'RCTActionSheet',
    'RCTBlob',
    'RCTGeolocation',
    'RCTBlob',
    'RCTLinkingIOS',
    'RCTWebSocket', # Needed for debugging
    'RCTAnimation', # Needed for FlatList and animations running on native UI thread
    # Add any other subspecs you want to use in your project
    ]

---

4、Xcode 编译失败，报错 boost/iterator/iterator_adaptor.hpp’ 文件找不到，

• 1、XQRNComponent 文件夹、pods文件夹、Podfile.lock全部删除；
• 2、Xcode clean后，关闭。
• 3、XQRNComponent 按照1重新创建
• 4、pods重新安装（pod install）
• 5、重启xcode。
• 6、RN项目目录下，npm start -- --reset-cache

---

5、Xcode 编译失败，报错 No component found for view with name "RCTText" 。

打开 ./node_modules/react-native/React.podspec ，将 RCTText 的 source_files 路径修改为：

s.subspec "RCTText" do |ss|
    ss.dependency             "React/Core"
    ss.source_files         = "Libraries/Text/**/*.{h,m}"
  end

该为facebook/react-native某版本的bug，详见 #17920

---

6、开发小记

• 1、RCT_EXPORT_METHOD导出的方法，默认情况下在异步线程里面执行。可用 GCD切到主线程执行。
• 2、RN项目开发中使用Promise，注意，Promise的resolve方法只能传递一个参数，多写了，默认只传递第一个，若要传递多个，封装成数组或字典传递。