序
不知不觉就过了6个月试用期，用 ReactNative 开发也有几个月了，后面应该还会持续下去，本文主要列举一些实际工作过程中遇到的坑，如果有更优的解决方案，欢迎留言讨论。
一、报错信息：TypeError: global.nativeCallSyncHook is not a function...
问题：与原生有同步交互，又开启了调试模式
- 原生代码
@implementation RCTLeeNativeProvider
RCT_EXPORT_BLOCKING_SYNCHRONOUS_METHOD(getInfoForSync) {
return @{
@"version": @"1.0.0",
@"name": @"qinagzi"
};
}
@end
- JS调用原生代码
const params = NativeModules.LeeNativeProvider.getInfoForSync();
⚠️ RCT_EXPORT_BLOCKING_SYNCHRONOUS_METHOD
- 1.2、解决方案（以下采用一种即可）
1、关闭远程调试 [Stop Remote JS Debugging], 调试可采用alert(xx)
2、找到调试的JS文件，先注释同步交互方法，采用伪代码实现，调试完再改回去（纯为了调试）
3、使用其他 api 替换 RCT_EXPORT_BLOCKING_SYNCHRONOUS_METHOD
- 例如：RCT_EXPORT_METHOD + Promises
问题及解决方案 - [Stop Remote JS Debugging]
官网说明（⚠️只有英文版的才有，中文版没有写）
二、Warning: Each child in an array or iterator should have a unique “key” prop.
- 2.1、在循环的子项添加一个key
修改前
listData.map((item, index) => {
return (
<View style={{...}}>
</View>
)
})
修改后
listData.map((item, index) => {
return (
<View style={{...}} key={index}>
</View>
)
})
三、<Text>标签在部分安卓上展示不全
- 3.1、在style中添加lineHeight
<Text style={{
fontSize: 14,
lineHeight:14 * 1.5,
}}>xxxxxxx....</Text>
四、Module HMRClient is not a registered callable module (calling enable)
问题
解决方案
五、global.nativeTraceBeginSection is not a function
六、ScrollView 滚动条位置不对
滚动条位置不对
增加属性设置 ：
<ScrollView scrollIndicatorInsets={{right: 1}} ...
七、react-scripts: command not found
/bin/sh: react-scripts: command not found
error Command failed with exit code 127.
解决方案：
1、删除node_modules
2、npm install
八、断点调试
断点调试
九、Invariant Violation: Invariant Violation: Text strings must be rendered within a...
IMG_0533.PNG
检查一下代码，例如
- 代码里面多了；符号
- 代码块里面写了注释
我的错误代码：多了一个分号
{this._renderMarqueeHorizontal()};
十、legal callback invocation from native module. This callback type only permits a single invocation from native code.
IMG_94EB4F8119C5-1.jpeg
原生的回调只允许调用一次，出现这个问题，你肯定是原生触发了多次回调。
我的代码问题：
RCT_EXPORT_METHOD(beginSpeaking:(NSDictionary *)option
resolve:(RCTPromiseResolveBlock)resolve
reject:(RCTPromiseRejectBlock)reject) {
self.resolve = resolve;
....
// 1、添加了一个通知
// 2、然后通知回调的时候调用 self.resolve({xx:xx});
// 3、通知再次被触发，又调用了 self.resolve({xx:xx});
}
持续更新中
参考文章
React Native-英文版
JSI小试牛刀——Native同步调用JS代码
Faster than faster——RN新架构中的JavaScript Interface
Android P/Q文本显示不全
