ReactNative 常见问题汇总(1)
![](https://i-blog.csdnimg.cn/blog_migrate/55d7d204adb5e3a03bcfc77992c28e6d.webp?x-image-process=image/format,png)
总想说点啥
最近在学习ReactNative,感慨良多;由于当年太任性,没有好好学习JS,现在想想可谓是痛心疾首啊!不过话又说回来,好像ReactNative跟JS没有什么太大的关联,但又没有太大的区别(以上是个人观点,不代表任何立场;本人是个菜鸟一枚,见解不到位的,望大神私信指正,在此先叩谢!)。
使用ReactNative需要搭建RN开发环境,在此就不介绍了,因为网上特别多,请随意百度;而我采用的是FaceBook推荐的IDE(Atom+Nuclide)安装教程(Windows平台的小伙伴还请自行百度哦),这样安装可以解决网上说的Atom性能卡顿的问题。
书归正传
ReactNative常见问题汇总笔记一
1. Can't find variable: xxxx
![](https://i-blog.csdnimg.cn/blog_migrate/c5e37d8ef689379a2285ef263e37680b.webp?x-image-process=image/format,png)
问题分析:搞IT的就算英文再烂应该也能看懂这句log吧,所以缺少什么就导入什么文件;
Debug:是系统自带的Component的话,就在当前JS中找到Import {........} from 'react-native',在{}中添加对应的名称就可以了;如果不是系统的,那就自行创建这个Component.
2. Unable to find this module in its module map or any of the node_modules directories under ......
![](https://i-blog.csdnimg.cn/blog_migrate/bd49271223cf9914c0add250fba5ca1a.webp?x-image-process=image/format,png)
问题分析:这句话的意思是‘在模块映射或任何node_modules目录下都无法找到该模块’,因此查看一下是否有引用到没有导入的Component;
Debug:因此找到图中的module 在代码中核查这个路径是否存在该Component;解决方法如下:
改正前:
import MySceneComponent from '../MySceneComponent';
改正后:
import MySceneComponent from './MySceneComponent';
3. Unhandled JS Exception: null is not an object (evaluating 'this.state.xxx')
![](https://i-blog.csdnimg.cn/blog_migrate/bde46583c38cabfe4e232e8a53eaa945.webp?x-image-process=image/format,png)
问题分析:ES6的初始化需要把初始化的对象放在Constructor方法中,而不是放在getInitialState中;而如果是采用的是React.createClass的话就是可以把初始化放在getInitialState之中,因此分情况而定;
Debug:具体情况具体分析。
#4. this.setState is not a function
![](https://i-blog.csdnimg.cn/blog_migrate/fe2cf14dc0e615053d1926fa645f69b7.webp?x-image-process=image/format,png)
问题分析:是说这个状态设置不是一个函数;在react中的this作为的是组件的实例,当成功回调的时候,就改变了this的指向;react中支持箭头(=>)指向this,和bind()函数绑定组件实例(注:据说bind()是ES5的方法,由于我的ES没有一点点的涉及,所以这是网友说的);
Debug:根据红色的错误日志点击第一条日志,然后在IDE中修改代码为
使用bind()绑定组件方案:
onRefresh={this._onRefresh.bind(this)}
使用ES6新特性箭头函数=>()的解决方案:
onRefresh={() => {this._onRefresh()}}