React Native移动端开发杂记

原创于 2020-01-25 15:59:07 发布 · 2.3k 阅读

0 ·

CC 4.0 BY-SA版权

RN 专栏收录该内容

2 篇文章

订阅专栏

本文提供了解决React Native开发中遇到的多种错误的详细步骤，包括错误代码101、构建失败、依赖项问题及组件布局技巧等，适用于开发者在遇到类似问题时参考。

no packager (error code 101)

比较完整的报错信息如下：run-android --no-packager 时出错 (error code 101)
如果应用代码本身没有严重的问题，VSCode调试时出现这种无厘头的报错可以在Node命令行窗口中通过下面的命令来解决：

// 已经定位到工程目录下
cd android
gradlew clean

第二行命令将用于清除android目录下的build文件夹
参考链接

error in opening zip file

找到报错中对应的文件夹，删除目录，再次执行被报错的命令，等待重新下载报错的文件。

启动应用时进度卡在99% >app:installDebug但不报错

具体原因未知，问题解决前最后的操作是：

将android目录下的build.gradle中依赖项的
```
classpath("com.android.tools.build:gradle:3.5.3")
```
替换成
```
classpath("com.android.tools.build:gradle:1.2.3")
```
但在执行gradlew clean命令时报错 Failed to apply plugin [id ‘com.android.application’]，然后又不得不改回了原来的依赖版本。
使用阿里云的maven依赖项
将android/build.gradle中的jcenter()和google()分别替换为
```
jcenter() --> maven { url 'https://maven.aliyun.com/repository/jcenter' }
```
```
google() --> maven { url 'https://maven.aliyun.com/repository/google' }
```
注意有多处需要替换
替换完成后清理工程、重新运行 npx react-native run-android
应用顺利启动。

推测应该是上面两个步骤中有一步执行时补全了缺失的某个依赖项，在此之后新建一个工程，即使不进行上面两步操作，应用仍然可以顺利启动。水平有限，不明所以。

将VSCode终端改为Nodejs命令行

打开settings.json添加或修改下面的内容

	"terminal.integrated.shell.windows": "C:\\Windows\\System32\\cmd.exe",
    "terminal.integrated.shellArgs.windows": [
        "\/k D:\\PROGRA~2\\nodejs\\nodevars.bat"
    ]

下面的参数内容可以参考用来打开Nodejs命令行的超链接的属性：
在这里插入图片描述
按照json格式要求将参数写到中括号里。
注意：
如果我们单纯将目录抄上，会因为Program Files路径名称中有空格而造成在cmd中命令不能正确识别。所以需要用PROGRA~1 或者是PROGRA~2 来表示对应的文件夹，不过奇怪的是在我的D盘中PROGRA~1 即路径D:\PROGRA~1 所代表的是D:\Program Files (x86)，与我的C盘和网上的一些资料不同。所以我这里写的是D:\\PROGRA~2\\ 而不是D:\\PROGRA~1\\。原因不明，可能与文件夹的创建时间有关。
参考我这篇博客设置的朋友不要直接复制，需要先确认一下自己电脑的情况。
参考博客

Execution failed for task ‘:app:transformDexArchiveWithDexMergerForDebug’.

完整报错信息如下：

* What went wrong:
Execution failed for task ':app:transformDexArchiveWithDexMergerForDebug'.
> com.android.build.api.transform.TransformException: java.lang.RuntimeException: java.lang.RuntimeException: com.android.builder.dexing.DexArchiveMergerException: Error while merging dex archives:
  The number of method references in a .dex file cannot exceed 64K.
  Learn how to resolve this issue at https://developer.android.com/tools/building/multidex.html

报错原因：应用中有超过64K的方法(包括依赖项)
解决方案

JS如何将数组逆序排列

开发的应用中有类似于时间轴的功能，如果历史记录太多不容易查找需要逆序排列，将UI组件对象的数组逆序排列即可，这里记录两个方法：

array.unshift(插入到数组开头的元素)  // 与push()相对应
array.reverse()	  // 将数组中已有的元素逆序排列

可以参考这篇博客

如何判断对象是不是字符串

typeof(obj) == 'string'

for in 和 for of 的区别

for in // 迭代数组或对象的索引
for of // 迭代数组的内容

如果对对象使用for of会报错。

关于JS对象的深拷贝

下面深拷贝的方法是一个通吃的解决方案，可以对多层嵌套的对象进行深拷贝。

JSON.parse(JSON.stringify(obj))

关于组件的绝对位置

需要组件设置为绝对位置，如果想让它显示在其他已有组件的上层，那么应该将它写在已有组件的后面。

<View>
	<其他组件>
	...
	</ 其他组件>
	<绝对位置组件 style={{position: 'absolute'}}>
	</ 绝对位置组件>
</ View>

路由重置

应用场景：由登录界面转跳应用主界面后，使用左滑手势或虚拟返回按键又回到登录界面。
使用react-navigation中的Stack Navigation组件

import {StackActions, NavigationActions} from 'react-navigation';
 /**
   * 转跳到主界面
   */
  _goToMain() {
    let resetAction = StackActions.reset({
      index: 0,
      actions: [NavigationActions.navigate({routeName: 'MainPage'})],
    });
    this.props.navigation.dispatch(resetAction);
  }