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
        })
    }
}

5. 在mac上开启remote js debugging 卡顿的解决办法

把调试页面单独拉出来，和模拟器都放在主界面上就不会卡顿了。。

6. Image标签的source属性传入变量则请求不到静态图片资源

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

在封装一个公用的头部时候有一个图标需要动态的变化，图片的路径就是src这个变量，但是这样会造成错误

Requiring unknown module "./image/.."

查阅开发文档后:

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

竟然必须require一个静态路径，不能包含变量，应该是这个意思，因此只能根据不同的参数在此组件中再做选择了，而不能直接传递图片的路径过来使用。

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}/>