ReactNative 易錯點整理(踩坑之旅)

1隔盛、常用書寫

1.1 自定義組件名時首字母要大寫旦签,否則會報錯。
1.2 render()函數(shù)里面的return關(guān)鍵字后面的代碼必須在()內(nèi)包括肪跋,否則會報錯歧蒋!

import React , { Component } from 'react';

class HelloMessage extends  Component{
  render () {
    return (  //return后面一定要帶括號()
      <h1> hello {this.props.name}</h1>
      )
  }
}

export default HelloMessage;

2、ES6里面的箭頭函數(shù)問題

()=>()單行函數(shù)州既,相當于函數(shù)體內(nèi)加了return 字段谜洽,返回對象
()=>{}多行函數(shù),多行函數(shù)默認不帶return字段吴叶,如果返回值是要手動加入return 字段的阐虚,否則沒有任何值返回!0雎薄实束!如果需要返回使用下面寫法

()=>{
  return ...
}

自己曾犯得書寫錯誤:

const shareImage = [
  require('../../imgs/share/weixin.png'),
  require('../../imgs/share/pengyouquan.png'),
  require('../../imgs/share/qq.png'),
  require('../../imgs/share/kongjian.png') 
]
 <View style={styles.shareItem}>
        {
            shareImage.map(item=>{
                    <Image key={item} source={require('../../imgs/share/weixin.png')} style={{width:75, height:95}}
                />
             })
         }        
  </View>

在上面的代碼中我想使用map方法遍歷數(shù)組,然后生成對應(yīng)數(shù)組的圖片逊彭,我使用的是{},發(fā)現(xiàn)圖片并沒有生成咸灿,檢查好長時間才發(fā)現(xiàn),沒有使用return關(guān)鍵字來返回生成的圖片诫龙,這里改為()就代表默認是使用了return的啦析显。書寫的時候容易忽略!G┰摺谷异!
2、this問題

3锦聊、React Native代碼中不允許出現(xiàn)console.log();歹嘹,否則真機運行會出現(xiàn)莫名錯誤如導(dǎo)航不能push跳轉(zhuǎn)頁面等。

4孔庭、在發(fā)送http請求的時候(我遇到的是在分享到QQ平臺時url訪問不了)忘記對url進行編碼尺上,這樣導(dǎo)致url中的特殊字符+ : / ; ?&被轉(zhuǎn)義,導(dǎo)致url訪問不了圆到。

解決辦法:

javascript可以使用的內(nèi)置函數(shù)有
encodeURI()
encodeURIComponent()
他們都是用utf-8的編碼方式
 
encodeURI()怎抛,用來encode整個URL,不會對下列字符進行編碼:+ : / ; ?&芽淡。它只會對漢語等特殊字符進行編碼
encodeURIComponent ()马绝,用來enode URL中想要傳輸?shù)淖址鼤λ衭rl敏感字符進行encode
在對url做encode操作時挣菲,一定要根據(jù)情況選擇不同的方法富稻。
例如url = 'www.xxx.com/aaa/bbb.do?parm1=羅'
此時可以用encodeURI(url)
當你的參數(shù)中包含+ : / ; ?&請使用 encodeURIComponent 方法對這些參數(shù)單獨進行編碼。
例如url = 'www.xxx.com/aaa/bbb.do?parm1=www.xxx.com/ccc/ddd?param=abcd'
encodeURI(url)絕對無法滿足要求白胀,因為param1=www.xxx.com/ccc/ddd?param=abcd椭赋,這個參數(shù)是不能按照我們的要求encode的,
此時應(yīng)該這樣單獨對參數(shù)進行encode
url = 'www.xxx.com/aaa/bbb.do?parm1=' + encodeURIComponen('www.xxx.com/ccc/ddd?param=abcd')


編碼后的url的值為
www.xxx.com/aaa/bbb.do?parm1=www.xxx.com%2Fccc%2Fddd%3Fparam%3Dabcd
此時接受此請求的服務(wù)端就能夠成功取得param1=www.xxx.com/ccc/ddd?param=abcd

5或杠、在使用<FlatList />組件時哪怔,更新數(shù)據(jù)源數(shù)組里某項的某個字段的值時,頁面UI不進行更新向抢。

兩種解決辦法蔓涧,
5.1 給<FlatList />組件指定 數(shù)據(jù)源

 <FlatList
      extraData={this.state}   // 指定 數(shù)據(jù)源
      keyExtractor={(item, index) => index.toString()}
      data={this.state.dataList}
      renderItem={(data) => < ListItem data={data} cellClick={(item) => this.cellClick(item)}/>}
 />

5、2 更改數(shù)據(jù)的時候使用深拷貝笋额,保證在內(nèi)存里不是同一個內(nèi)存地址

cellClick(item) {
    item.extend = !item.extend;
    const index = this.state.dataList[item];
    // 不可以值引用元暴, 深拷貝
  //  解構(gòu)相當于新的的內(nèi)存地址
    let tempData = [...this.state.dataList];
    tempData[index] = item;
    this.setState({ dataList: tempData });
  }

6、RN項目在xcode 11.4.1 上編譯成功了兄猩,但是在 IPhone 模擬器運行后報錯了

xcode控制臺報錯:

2020-03-08 09:32:21.481 [error][tid:main][RCTModuleMethod.mm:375] Unknown argument type '__attribute__' in method -[RCTAppState getCurrentAppState:error:]. Extend RCTConvert to support this type.
2020-03-08 09:32:21.481540+0800 NativeTest[6056:30774] Unknown argument type '__attribute__' in method -[RCTAppState getCurrentAppState:error:]. Extend RCTConvert to support this type.
2020-03-08 09:32:21.514 [fatal][tid:main] Exception '*** -[__NSArrayM objectAtIndexedSubscript:]: index 1 beyond bounds [0 .. 0]' was thrown while invoking getCurrentAppState on target AppState with params (
    2,
    3
)
callstack: (
    0   CoreFoundation                      0x00007fff23c7127e __exceptionPreprocess + 350
    1   libobjc.A.dylib                     0x00007fff513fbb20 objc_exception_throw + 48
    2   CoreFoundation                      0x00007fff23d03ab1 _CFThrowFormattedException + 194
    3   CoreFoundation                      0x00007fff23b85749 -[__NSArrayM objectAtIndexedSubscript:] + 169
    4   NativeTest                          0x00000001011d00df -[RCTModuleMethod processMethodSignature] + 13327
    5   NativeTest                          0x00000001011d4e9d -[RCTModuleMethod invokeWithBridge:module:arguments:] + 189
    6   NativeTest                          0x000000010126fd17 _ZN8facebook5reactL11invokeInnerEP9RCTBridgeP13RCTModuleDatajRKN5folly7dynamicE + 791
    7   NativeTest                          0x000000010126f823 _ZZN8facebook5react15RCTNativeModule6invokeEjON5folly7dynamicEiENK3$_0clEv + 131
    8   NativeTest                          0x000000010126f799 ___ZN8facebook5react15RCTNativeModule6invokeEjON5folly7dynamicEi_block_invoke + 25
    9   libdispatch.dylib                   0x00000001020bddd4 _dispatch_call_block_and_release + 12
    10  libdispatch.dylib                   0x00000001020bed48 _dispatch_client_callout + 8
    11  libdispatch.dylib                   0x00000001020ccde6 _dispatch_main_queue_callback_4CF + 1500
    12  CoreFoundation                      0x00007fff23bd4049 __CFRUNLOOP_IS_SERVICING_THE_MAIN_DISPATCH_QUEUE__ + 9
    13  CoreFoundation                      0x00007fff23bceca9 __CFRunLoopRun + 2329
    14  CoreFoundation                      0x00007fff23bce066 CFRunLoopRunSpecific + 438
    15  Foundation                          0x00007fff2576b86f -[NSRunLoop(NSRunLoop) runMode:beforeDate:] + 211
    16  Foundation      

ios模擬器報錯如下:

image.png

解決方案1:

升級RN的版本到 0.59.9 或者最新版 0.60.x

解決方案2:

參考官網(wǎng)的修改代碼https://github.com/facebook/react-native/pull/25146/files茉盏,手動將代碼 node_modules/react-native/React/Base/RCTModuleMethod.mmRCTParseUnused方法,大約在 91 行:


static BOOL RCTParseUnused(const char **input)
{
  return RCTReadString(input, "__unused") ||
         RCTReadString(input, "__attribute__((unused))");
}

修改為

static BOOL RCTParseUnused(const char **input)
{
  return RCTReadString(input, "__attribute__((unused))") ||
         RCTReadString(input, "__attribute__((__unused__))") ||
         RCTReadString(input, "__unused");
}

重新編譯后枢冤,運行正常了鸠姨。
參考--https://www.cpming.top/p/rn-error-unknown-argument-type-attribute

7、React Native在iOS端真機編譯時報錯:Can't find 'node' binary to build React Native bundle

在模擬器開發(fā)編譯正常淹真,但是在打包的時候報上面錯誤炼吴。

image

仔細認真的看開發(fā)工具給出的錯誤提示:

error: Can't find 'node' binary to build React Native bundle 
If you have non-standard nodejs installation, 
select your project in Xcode, find 'Build Phases' - 'Bundle React Native code and images' and change NODE_BINARY to absolute path to your node executable (you can find it by invoking 'which node' in the terminal)
image.png

仔細閱讀發(fā)現(xiàn)已經(jīng)告訴我們解決辦法了臊诊,大概意思是:

如果你使用了非標準的 nodejs 安裝流程培遵,
在Xcode中選擇Project -> Build Phases -> Bundle React Native code and images掉瞳,
把NODE_BINARY改為node可執(zhí)行文件的絕對路徑
你可以在終端命令行中執(zhí)行 `$ which node` 來查看你當前node的絕對路徑

拿到node的本地安裝路徑之后進行下面的設(shè)置:
1、


image.png

2跪妥、


image.png

設(shè)置之后重新真機編譯就正常通過了。

8、xcode11遇到React Native啟動報錯的問題

Unknown argument type '__attribute__' in method -[RCTAppState getCurrentAppState:error:]

Xcode升級導(dǎo)致項目運行不起來
報錯如下圖:


image.png

報錯為

Unknown argument type 'attribute' in method -[RCTAppState getCurrentAppState:error:]. Extend RCTConvert to support this type.

解決辦法:

這個BUG是Xcode.11引起的, 可以查看這個問題的提交記錄罚斗,鏈接為:https://github.com/facebook/react-native/issues/25138

Xcode打開
Libraries->React.xcodeproj->React->Base ->RCTModuleMethod.mm
或者在Xcode直接搜索 RCTModuleMethod. 這個文件,
我們只需要找到 RCTModuleMethod.mm 這個文件,大約在93行左右

修改為:

static BOOL RCTParseUnused(const char **input)

{

  return RCTReadString(input, "__unused") ||

         RCTReadString(input, "__attribute__((__unused__))") ||

         RCTReadString(input, "__attribute__((unused))");

}

這個函數(shù)插入 RCTReadString(input, "__attribute__((__unused__))") 這行代碼重新運行就行了宅楞。

這樣項目就能啟動了针姿,而且打包的app也不會閃退了。

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末厌衙,一起剝皮案震驚了整個濱河市距淫,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌婶希,老刑警劉巖榕暇,帶你破解...
    沈念sama閱讀 218,607評論 6 507
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場離奇詭異饲趋,居然都是意外死亡拐揭,警方通過查閱死者的電腦和手機,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 93,239評論 3 395
  • 文/潘曉璐 我一進店門奕塑,熙熙樓的掌柜王于貴愁眉苦臉地迎上來堂污,“玉大人,你說我怎么就攤上這事龄砰∶瞬” “怎么了?”我有些...
    開封第一講書人閱讀 164,960評論 0 355
  • 文/不壞的土叔 我叫張陵换棚,是天一觀的道長式镐。 經(jīng)常有香客問我,道長固蚤,這世上最難降的妖魔是什么娘汞? 我笑而不...
    開封第一講書人閱讀 58,750評論 1 294
  • 正文 為了忘掉前任,我火速辦了婚禮夕玩,結(jié)果婚禮上你弦,老公的妹妹穿的比我還像新娘。我一直安慰自己燎孟,他們只是感情好禽作,可當我...
    茶點故事閱讀 67,764評論 6 392
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著揩页,像睡著了一般旷偿。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 51,604評論 1 305
  • 那天萍程,我揣著相機與錄音幢妄,去河邊找鬼。 笑死尘喝,一個胖子當著我的面吹牛磁浇,可吹牛的內(nèi)容都是我干的斋陪。 我是一名探鬼主播朽褪,決...
    沈念sama閱讀 40,347評論 3 418
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼无虚!你這毒婦竟也來了缔赠?” 一聲冷哼從身側(cè)響起,我...
    開封第一講書人閱讀 39,253評論 0 276
  • 序言:老撾萬榮一對情侶失蹤友题,失蹤者是張志新(化名)和其女友劉穎嗤堰,沒想到半個月后,有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體度宦,經(jīng)...
    沈念sama閱讀 45,702評論 1 315
  • 正文 獨居荒郊野嶺守林人離奇死亡踢匣,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 37,893評論 3 336
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發(fā)現(xiàn)自己被綠了戈抄。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片离唬。...
    茶點故事閱讀 40,015評論 1 348
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖划鸽,靈堂內(nèi)的尸體忽然破棺而出输莺,到底是詐尸還是另有隱情,我是刑警寧澤裸诽,帶...
    沈念sama閱讀 35,734評論 5 346
  • 正文 年R本政府宣布嫂用,位于F島的核電站,受9級特大地震影響丈冬,放射性物質(zhì)發(fā)生泄漏嘱函。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點故事閱讀 41,352評論 3 330
  • 文/蒙蒙 一埂蕊、第九天 我趴在偏房一處隱蔽的房頂上張望往弓。 院中可真熱鬧,春花似錦粒梦、人聲如沸亮航。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,934評論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽缴淋。三九已至,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間重抖,已是汗流浹背露氮。 一陣腳步聲響...
    開封第一講書人閱讀 33,052評論 1 270
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留钟沛,地道東北人畔规。 一個月前我還...
    沈念sama閱讀 48,216評論 3 371
  • 正文 我出身青樓,卻偏偏與公主長得像恨统,于是被迫代替她去往敵國和親叁扫。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當晚...
    茶點故事閱讀 44,969評論 2 355

推薦閱讀更多精彩內(nèi)容

  • Spring Cloud為開發(fā)人員提供了快速構(gòu)建分布式系統(tǒng)中一些常見模式的工具(例如配置管理畜埋,服務(wù)發(fā)現(xiàn)莫绣,斷路器,智...
    卡卡羅2017閱讀 134,657評論 18 139
  • 點擊查看原文 Web SDK 開發(fā)手冊 SDK 概述 網(wǎng)易云信 SDK 為 Web 應(yīng)用提供一個完善的 IM 系統(tǒng)...
    layjoy閱讀 13,766評論 0 15
  • 從前對于外在的形式和人的外表悠鞍、事物的外觀都不大看重对室,以為講究內(nèi)在就可以了。 這種想法原來也是偏頗的咖祭。 人生活在情緒...
    鉛筆芒種閱讀 184評論 0 1
  • Hi七月閱讀 117評論 0 1
  • 認識我的朋友會知道我最近在做一個關(guān)于習慣養(yǎng)成的網(wǎng)上社區(qū)(每月養(yǎng)成好習慣)掩宜,到現(xiàn)在也已經(jīng)有將近一個月的時間了,網(wǎng)站運...
    高方文閱讀 465評論 4 8