实际ReactNative开发中遇到的坑

序

不知不觉就过了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

---

二、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...

检查一下代码，例如
- 代码里面多了；符号
- 代码块里面写了注释


我的错误代码：多了一个分号
{this._renderMarqueeHorizontal()};

持续更新中

---

参考文章

React Native-英文版
JSI小试牛刀——Native同步调用JS代码
Faster than faster——RN新架构中的JavaScript Interface
Android P/Q文本显示不全