剛?cè)肟訒r(shí)候記下來的一些小東西，主要并非技術(shù)方面的，有碰到相似的可以參考下。

填坑筆記

開始入坑RN，從最開始的學(xué)起難免有不少亂七八糟的問題，記錄在這里。

1. 8081端口占用問題

按照官網(wǎng)教程搭建開發(fā)環(huán)境并按照下面代碼運(yùn)行時(shí)候有報(bào)錯，顯示8081端口的問題

react-native init AwesomeProject
cd AwesomeProject
react-native run-ios

應(yīng)該就是端口占用的問題，首先找到占用程序，用下面代碼，加上sudo，如果什么都沒有發(fā)生?？梢钥吹絇ID。

lsof -i :8081

然后用下面命令殺掉,也加上sudo。

kill -9 <PID>

參考鏈接

2. 繼續(xù)no such file or directory...錯誤

繼續(xù)運(yùn)行又顯示報(bào)錯：

ERROR ENOENT: no such file or directory, lstat '/AwesomeProject/ios/build/ModuleCache/3F1D94PC0NUP2/AVFoundation-1M2ASOEW37WIZ.pcm-53d428b3'
{"errno":-2,"code":"ENOENT","syscall":"lstat","path":"/AwesomeProject/...

在github找到解決方案，在工程中找到RCTWebSocket，移除build setting中custom compiler flags。如下圖：

參考鏈接

3. 運(yùn)行一個demo時(shí)候由于版本問題報(bào)錯

npm WARN react-native@0.35.0 requires a peer of react@~15.3.1 but none was installed.
Unable to resolve module react/lib/ReactUpdates ...... Module does not exist in the module map or in these

因?yàn)閜ackage.json依賴中react是^15.3.1，導(dǎo)致了版本不匹配的問題，所以改為~15.3.1，刪除node_modules，重新npm install，最后npm start -- --reset-cache，清理一下緩存。這樣再運(yùn)行app即可順利進(jìn)行。

參考鏈接1
參考鏈接2

4. this指向的問題，建議都用箭頭函數(shù)來聲明，就不用bind(this)了

_goToDetail = (rowData) => {
    const { navigator } = this.props;
    const imageUrl = `https:${rowData.imagePath}`;
    console.log("去商品詳情頁",rowData);
    if(navigator) {
        navigator.push({
            component: ProductImageContainer,
            rowData: rowData
        })
    }
}

5. 在mac上開啟remote js debugging 卡頓的解決辦法

把調(diào)試頁面單獨(dú)拉出來，和模擬器都放在主界面上就不會卡頓了。。

6. Image標(biāo)簽的source屬性傳入變量則請求不到靜態(tài)圖片資源

let src = this.props.src
const imgSrc = require(src)
<Image style={styles.titleIcon} source={imgSrc}/>

在封裝一個公用的頭部時(shí)候有一個圖標(biāo)需要動態(tài)的變化，圖片的路徑就是src這個變量，但是這樣會造成錯誤

Requiring unknown module "./image/.."

查閱開發(fā)文檔后:

In order for this to work, the image name in require has to be known statically.

竟然必須require一個靜態(tài)路徑，不能包含變量，應(yīng)該是這個意思，因此只能根據(jù)不同的參數(shù)在此組件中再做選擇了，而不能直接傳遞圖片的路徑過來使用。

switch(item) {
          case '合并收益':
            imgSrc = require('../../imgs/combine.png');
            break;
          case '收益率走勢':
            imgSrc = require('../../imgs/up_01.png');
            break;
          default:
            imgSrc = require('../../imgs/up_01.png');
            break;
        }
 <Image style={styles.titleIcon} source={imgSrc}/>