序
不知不覺就過了6個月試用期，用 ReactNative 開發(fā)也有幾個月了口叙，后面應(yīng)該還會持續(xù)下去炼绘，本文主要列舉一些實際工作過程中遇到的坑，如果有更優(yōu)的解決方案妄田，歡迎留言討論俺亮。
一、報錯信息：TypeError: global.nativeCallSyncHook is not a function...
問題：與原生有同步交互疟呐，又開啟了調(diào)試模式
- 原生代碼
@implementation RCTLeeNativeProvider
RCT_EXPORT_BLOCKING_SYNCHRONOUS_METHOD(getInfoForSync) {
return @{
@"version": @"1.0.0",
@"name": @"qinagzi"
};
}
@end
- JS調(diào)用原生代碼
const params = NativeModules.LeeNativeProvider.getInfoForSync();
?? RCT_EXPORT_BLOCKING_SYNCHRONOUS_METHOD
- 1.2脚曾、解決方案（以下采用一種即可）
1、關(guān)閉遠(yuǎn)程調(diào)試 [Stop Remote JS Debugging], 調(diào)試可采用alert(xx)
2启具、找到調(diào)試的JS文件本讥，先注釋同步交互方法，采用偽代碼實現(xiàn)，調(diào)試完再改回去（純?yōu)榱苏{(diào)試）
3拷沸、使用其他 api 替換 RCT_EXPORT_BLOCKING_SYNCHRONOUS_METHOD
- 例如：RCT_EXPORT_METHOD + Promises
問題及解決方案 - [Stop Remote JS Debugging]
官網(wǎng)說明（??只有英文版的才有旨椒，中文版沒有寫）
二、Warning: Each child in an array or iterator should have a unique “key” prop.
- 2.1堵漱、在循環(huán)的子項添加一個key
修改前
listData.map((item, index) => {
return (
<View style={{...}}>
</View>
)
})
修改后
listData.map((item, index) => {
return (
<View style={{...}} key={index}>
</View>
)
})
三综慎、<Text>標(biāo)簽在部分安卓上展示不全
- 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 滾動條位置不對
滾動條位置不對
增加屬性設(shè)置 ：
<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
八丈探、斷點(diǎn)調(diào)試
斷點(diǎn)調(diào)試
九录择、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
原生的回調(diào)只允許調(diào)用一次，出現(xiàn)這個問題讼渊，你肯定是原生觸發(fā)了多次回調(diào)动看。
我的代碼問題：
RCT_EXPORT_METHOD(beginSpeaking:(NSDictionary *)option
resolve:(RCTPromiseResolveBlock)resolve
reject:(RCTPromiseRejectBlock)reject) {
self.resolve = resolve;
....
// 1、添加了一個通知
// 2爪幻、然后通知回調(diào)的時候調(diào)用 self.resolve({xx:xx});
// 3菱皆、通知再次被觸發(fā)，又調(diào)用了 self.resolve({xx:xx});
}
持續(xù)更新中
參考文章
React Native-英文版
JSI小試牛刀——Native同步調(diào)用JS代碼
Faster than faster——RN新架構(gòu)中的JavaScript Interface
Android P/Q文本顯示不全
