React-Native之路上遇到的问题

来源:互联网 发布:程序员的成长之路 编辑:程序博客网 时间:2024/05/16 08:13

最近要研究下React Native,考虑使用RN来写一个安卓端。本篇文章记录一下操作中遇到的各种问题:

RN基本命令行

react-native init 项目名 初始化创建项目
react-native run-ios/android 命令行启动app
react-native --version 查看RN版本
npm info react-native 查看RN远程仓库所有版本信息
npm update -g react-native-cli 更新本地RN版本
npm install --save react-native@版本号 更新RN到指定版本

插件

WebstormRN代码提示插件

遇到的问题

默认安装过Android Studio virtualbox和Genymotion模拟器

1、Android Studio找不到Genymotion模拟器

解决方法
打开Android Studio首页面,SDK位置:
configure -> Project Defaults -> Project Structure

2、unable to load script from assets index.android.bundle on windows

react-native init xxx之后,打开Android studio,点击运行之后报的这个错。
解决方法:
1. (in project directory) mkdir android/app/src/main/assets
2.
react-native bundle --platform android --dev false --entry-file index.android.js --bundle-output android/app/src/main/assets/index.android.bundle --assets-dest android/app/src/main/res

3. react-native run-android 该项如果没有安装过JDK则会提示安装,点击下载,安装之后即可使用。

3. 使用npm导入react库之后,提示command run-ios unrecognized

我的理解: 使用npm导入三方库之后,由于module树中没有刚添加的三方库索引,所以,需要重新更新一下module树: npm install

4. 定时器问题

我在学习写demo的时候,是用的ES5的语法来写的,然后demo中需要使用一个定时器,所以我就调用了React提供的库react-timer-mixin。但是使用的时候,调用this.setInterval()的时候,报错了:
错误图片
然后我查了下,说是mixin不支持ES6语法(但是我用的是ES5的写法,所以我查了半天也不知道哪里的问题,有知道的大神请指教下)

然后处理方法:(不使用Mixin)但是在es6中使用时,需铭记在unmount组件时清除(clearTimeout/clearInterval)所有用到的定时器

componentDidMount() {  this.timer = setInterval(function(){      console.log('每隔1s执行一次的方法');  },1000);  this.timer = setTimeout(() => {    console.log('I do not leak!');  }, 5000);}componentWillUnmount() {  clearTimeout(this.timer);  clearTimeInterval(this.timer);}

5、运行react-native run-ios之后提示xcrun: error: unable to find utility “instruments”, not a developer tool or in PATH

解决方法:
这里写图片描述

6. 新建RN项目之后,使用Android studio打开安卓项目,遇到unable to load script from assets index.android.bundle问题

解决方法:
1. cd 到RN项目根目录
2. mkdir android/app/src/main/assets
3. react-native bundle --platform android --dev false --entry-file index.android.js --bundle-output android/app/src/main/assets/index.android.bundle --assets-dest android/app/src/main/res
4. react-native run-android

原创粉丝点击