[react-native]react-native填坑筆記

填坑筆記

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

1. 8081端口占用問題

按照官網教程搭建開發環境並按照下面代碼運行時候有報錯，顯示8081端口的問題

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

應該就是端口占用的問題，首先找到占用程序，用下面代碼，加上sudo，如果什么都沒有發生。可以看到PID。

lsof -i :8081

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

kill -9 <PID>

參考鏈接

2. 繼續no such file or directory...錯誤

繼續運行又顯示報錯：

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. 運行一個demo時候由於版本問題報錯

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

因為package.json依賴中react是^15.3.1，導致了版本不匹配的問題，所以改為~15.3.1，刪除node_modules，重新npm install，最后npm start -- --reset-cache，清理一下緩存。這樣再運行app即可順利進行。

參考鏈接1
參考鏈接2

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

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