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模擬器報錯如下:
解決方案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.mm
的 RCTParseUnused
方法,大約在 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ā)編譯正常淹真,但是在打包的時候報上面錯誤炼吴。
仔細認真的看開發(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)
仔細閱讀發(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、
2跪妥、
設(shè)置之后重新真機編譯就正常通過了。
8、xcode11遇到React Native啟動報錯的問題
Unknown argument type '__attribute__' in method -[RCTAppState getCurrentAppState:error:]
Xcode升級導(dǎo)致項目運行不起來
報錯如下圖:
報錯為
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也不會閃退了。