[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即可顺利进行。
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
})
}
}