實際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文本顯示不全