React native 问题/技巧记录 [不定期更新]

[以下问题适用于 RN 6.0 以上版本，其他版本未测试，不定期更新]

方法数大于 65536

cannot fit requested classes in a single dex file
The number of method references in a .dex file cannot exceed 64K

严格来讲，这是 android 的问题，RN 默认设置触发了这个错误，可在 multidex 找到答案，简单说一下

Android 5.0（API级别小于21）以下不支持多个 dex （android 打包后的库文件），而单个 dex 默认情况下最多只能有 65536 个方法，所以 app 的依赖较多的话，就会大于这个数，就出现这个问题。而RN默认为16（android/build.gradle 中的 minSdkVersion），【根据 更新记录，RN 在 0.64 之后不再支持 API 16-20，默认 minSdkVersion 改为 21，所以不再需要做任何处理】，如果必须要兼容低版本 Android，则只能使用较低版本的 RN，解决方法如下

1: 不兼容 5.0 了，修改 minSdkVersion 版本为 21，该方案也许还要等几年 （衰
2: 想办法减少依赖，不现实
3: 做一些配置修改，具体见： multidex
4: 启用R8压缩，在RN中就是设置 android/app/build.gradle 中 enableProguardInReleaseBuilds=true

启用 R8 生成 apk 会特慢，所以建议是 debug 时使用方案1或方案3，release 尝试使用方案4，但考虑到一般情况下，项目都是在做增量，所以哪怕是启用R8优化，总有一天会还是会超过 65536，还是老老实实用方案 3 吧。可以将 android/app/build/outputs 目录下生产的 apk 拖到 这个网站 查看总方法数

方案 3 在官方文档中已经写的很清楚了，这里记录一下，省的以后翻官方文档了。RN 使用了 androidx，如果是没有使用 andoridx 的项目, 会略有不同，请查阅官方文档

  1. 修改 android/app/build.gradle 
android {
    defaultConfig {
        multiDexEnabled true  // 开启 multiDex 支持
    }
}
dependencies {
    implementation 'androidx.multidex:multidex:2.0.1' // 引入 multiDex 库
}
  1. 修改 android/app/src/main/[project]/MainApplication.java 
// 修改
import android.app.Application;
// 为
import androidx.multidex.MultiDexApplication;

// 修改
public class MainApplication extends Application implements ReactApplication {
// 为
public class MainApplication extends MultiDexApplication implements ReactApplication {

RN 开启 R8 debug 问题

Requested enabled DevSupportManager, but DevSupportManagerImpl class was not found or could not be created

该问题 答案，在 android/app/proguard-rules.pro 中添加

-keep class com.facebook.react.devsupport.** { *; }
-dontwarn com.facebook.react.devsupport.**

启用 R8 优化，你可能碰到的不止这一个问题，尤其是安装插件多的时候，指不定哪个地方就暴露问题了。要特别小心的检查，如果插件明说了需要添加哪些混淆规则，一定要加上

Expiring Daemon because JVM heap space is exhausted

开启R8，在优化混淆的编译过程中需要内存，默认的不够用就出现这个情况了，一个简单的 答案

// 在 android/gradle.properties 添加
org.gradle.daemon=true
org.gradle.configureondemand=true
org.gradle.jvmargs=-Xmx4g -XX:MaxPermSize=2048m -XX:+HeapDumpOnOutOfMemoryError -Dfile.encoding=UTF-8


// 在 android/app/build.gradle 添加
android {
    ...
    dexOptions {
       javaMaxHeapSize "3g"
    }
   ...
}

生成 apk 太大

默认配置是生成了一个全平台兼容的 apk，内部包含了 arm/x86 等的 lib，只需配置 android/app/build.gradle

修改后，将为各平台生成不同的 apk，不出意外，包体积大概为原来的 1/4

// 该值 改为 true
def enableSeparateBuildPerCPUArchitecture = true

android {
    splits {
        abi {
            ...
            // 若仍需要一个全平台兼容apk，这里改为 true 即可
            universalApk false 
        }
    }
}

babel 优化

RN 的编译用的 babel，配置文件为项目根目录的 babel.config.js，使用 react init project 载入的项目都会有这个。这与一般的 babel 项目没什么不同，所以可以利用 babel 插件对 rn 项目进行优化。

提前备注：若配置 babel 插件后未生效，可尝试

watchman watch-del-all
yarn start --reset-cache

一、自定义别名

对于安装好的第三方应用，可以很舒服的 import * from "moudule"，但对于自己项目的源码，引入路径就成了可能就是这样子

import helper from './../../utils/helper'

我们可以使用 babel 的 module-resolver 为了让自己的代码引入也更加清爽，使用方法比较简单

安装 yarn add babel-plugin-module-resolver

module.exports = {

  // 添加以下配置, 在 alias 中配置别名
  plugins: [
    ['module-resolver', {
      // 这里根据自己项目用的, 也可能是 .ts | .native | .tsx 等
      extensions: [".ios.js", ".android.js", ".js", ".json"],
      alias: {
        '@pages': './src/pages',
        '@res': './src/res',
        '@utils': './src/utils',
      },
    }],
  ],

};

弄好这个，在项目中就可以 import helper from '@utils/helper'， 嗯，舒服多了。

二、console 优化

开发中常用 console debug 或 依赖的第三方组件也会有 console，这些在 product 模式下是影响性能的一个因素，并且还会增加最终打包 js bundle 的体积，增加 app 运行时的内存占用。

使用 remove-console 插件在编译时移除 console 语句。

安装 yarn add babel-plugin-transform-remove-console

module.exports = {

  // 添加以下配置
  plugins: [
    "transform-remove-console"
  ],

};

三、propTypes 优化

具体原因可参见这个 issue，去除 propTypes 可减小代码体积，甚至可以提升性能。目前发现了 babel-plugin-transform-react-remove-prop-types 这个拓展，还没来得及测试。

vscode 配置

  1. 不使用 vscode 开发 java，感觉有点用但又不够用，还是 android studio 好用，就在插件中找 java 扩展，把他给禁用了，省的不小心点开个 Java 文件他就自动编译，还编译不好

android Studio 配置

  1. avd 模拟器默认放到系统用户目录了，磁盘不够用了，在 系统环境变量中添加 ANDROID_SDK_HOME 指定一个目录，将会做为 avd 存储目录，原来的目录可以删除掉。

相册访问

1，react-native-cameraroll

官方组件，但新版 rn 已从核心中移除该插件，若仍需要，可手动安装

yarn add @react-native-community/cameraroll

该扩展主要用于保存图片，另外提供了一个无界面读取图片列表 api，若有心，其实可以用 jsx 做一个界面出来，但对于界面问题，其实有更好的选择

2，react-native-image-picker

yarn add react-native-image-picker ( 详细 安装文档 )

该扩展自带选择图片的UI界面，同时具有拍摄功能，可以用于 上传或拍摄 的应用场景

3，react-native-image-crop-picker

yarn add react-native-image-crop-picker

该扩展与2类似，但在提供了 UI 界面的同时，额外提供了一个 图片裁剪 的功能

-------权限--------

以上扩展需要使用相册/相机/麦克风，所以需要添加权限

android: 修改 android/app/src/main/AndroidManifest.xml

<manifest ...>
     <!--  添加以下权限 -->
     <uses-permission android:name="android.permission.CAMERA" />
    <uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE"/>
</manifest >

iOS，修改 ios/[project]/Info.plist， 添加以下键值对

...
<dict>
     ....
    <key>NSPhotoLibraryUsageDescription</key>
    <string>需要您的同意, $(PRODUCT_NAME) 才能访问相册</string>
    <key>NSPhotoLibraryAddUsageDescription</key>
    <string>需要您的同意, $(PRODUCT_NAME) 才能保存图片</string>

    <key>NSCameraUsageDescription</key>
    <string>需要您的同意, $(PRODUCT_NAME) 才能访问相机</string>
    <key>NSMicrophoneUsageDescription</key>
    <string>需要您的同意, $(PRODUCT_NAME) 才能使用麦克风录制视频</string>
</dict>

PNG 自动优化

android 使用 gradle 编译，默认会优化 png 文件，这本来是个好事，但在使用热更，尤其是增量更新，这反而成了坏事了，因为自动优化会改变文件 hash，导致后续版本无法正确比对文件，生成增量

禁用该功能参见 官方文档，在 app 的 build.gradle 添加

android {
    …
    buildTypes {
        release {
            crunchPngs false
        }
    }
}

js 环境

这个略坑，需要特别注意。

开启 debug 的情况下使用 chrome v8 引擎，实际运行使用的是 js 环境可能就是 JavaScriptCore 引擎，测试没有问题不代表实际没问题，比如 atob btoa 这对 base64 互转的函数，在 v8 下是 ok 的，但在 rn 的 js 环境下可能是没有的。

为什么说可能，一是因为 JavaScriptCore 也可能升级，二是 android 可以定制引擎，比如 rn 其实自带了一个 hermes 引擎，社区实现的 react-native-v8 引擎。

总之一句话：在使用一些比较新的 js global 对象时，要注意测试关闭 debug 是否仍然可运行。

android 状态栏

假设要做一个全屏的应用，使用沉浸式状态栏效果比较好，此时整个屏幕都可以使用，那么页面高度设置为屏幕高度即可（若顶部有重要内容，还要考虑刘海屏的问题，可能不合适）；但沉浸式在 android 5.0 以下不支持，不用额外安装插件，即可差异化实现。

import { Platform, Dimensions, StatusBar, StyleSheet, View} from 'react-native';

const {width:screenWidth, height:screenHeight} = Dimensions.get('window');
const viewHeight = Platform.OS === 'android' && Platform.Version < 21 
  ? screenHeight - StatusBar.currentHeight : screenHeight;

const styles = StyleSheet.create({
  wrapper: {
    width:screenWidth, 
    height:viewHeight,
  },
});

export default class extends Component {
  render() {
    return (<View style={styles.wrapper}>
      <StatusBar backgroundColor="transparent" translucent/>
    </View>)
  }
}

android 路径大全

  1. file://

绝对路径，通常为 APP 私有目录 或 系统共用目录

  1. content:// / android.resource://

文件符，这类路径背后其实映射了一个 file:// 路径，通常为跨 APP 共享文件的路径，比如 APP 读取 相册这个APP 的文件，相册的文件是私有的，直接给路径，不安全，系统层面不让读取，在用户授权的情况下，相册会生成一个 content:// 文件路径给其他 APP 使用。

  1. asset://

android/src/main/assets 目录下的文件，RN 默认是没这个目录的，需要的话可以自行创建一个，通常用来存放一些非常规类型的资源文件，比如静态 dat 文件，PDF 获取其他文档文件，一般用的较少，因为此类文件通常会联网获取。

该目录下文件会被打包到 APK 中，不能使用 RN 的热更进行替换。

  1. res://

android/src/main/res 目录下文件，与 asset:// 类似，一般存放图片类型文件，会被 android 索引为资源，即 drawable，但也可以放一些非常规文件到 android/src/main/res/raw， 此类文件也会被 android 索引.

在原生层面使用这类文件时，通常是直接调用文件名即可，无需前缀、后缀，所以这也就要求该目录下文件不可能重名，另外对于 drawable，可以根据 android 的规范针对不同分辨率创建多个目录，存放同名文件，运行时会自动选取最优路径。

在 RN 中， 使用 require('./file') 这种方式调用的文件在最终编译后，会被自动打包进 drawable 或 raw，在 Debug 模式下， require('./file') 在 RN 内部会解析为 http://，指向运行时的调试地址，可以动态更新；对于图片，可使用 @2x 这种格式对应不同分辨率；

由于使用了 require， 所以 RN 可以在中间决定指向的根目录，并提供了自定义指向的接口，若未定义，则指向 android/src/main/res/，所以这种方式的文件可以很方便的进行热更。

require 本地文件

在 js 文件使用 require(filepath) 来引用本地文件，最常用的是 Image 组件，但可能有第三方拓展也需要这么用，比如 webview / video 等；有可能出现 js 错误的问题，这是因为 RN 对引用本地文件做了限制，仅支持某些后缀，具体支持的后缀可参见 这个文件，如果这些后缀不满足要求，可根据该 文档 进行设置。

即在 rn 项目根目录的 metro.config.js 配置 (该配置会完全覆盖 metro 默认值，要全量配置）

module.exports = {
  resolver: {
    assetExts: [
      'png',
      'gif',
      ....
      'm3u8',
      'dat'
    ],
  },
  ...
};

中文名崩溃

RN 0.71 Android 命名中文崩溃，参考 问题，该问题出现在 Debug 版本，主要是依赖的 FLIPPER 导致，只需修改 android/gradle.properties

FLIPPER_VERSION=0.145.0
最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 202,802评论 5赞 476
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 85,109评论 2赞 379
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 149,683评论 0赞 335
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 54,458评论 1赞 273
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 63,452评论 5赞 364
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 48,505评论 1赞 281
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 37,901评论 3赞 395
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 36,550评论 0赞 256
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 40,763评论 1赞 296
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,556评论 2赞 319
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,629评论 1赞 329
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 33,330评论 4赞 318
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 38,898评论 3赞 307
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,897评论 0赞 19
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,140评论 1赞 259
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 42,807评论 2赞 349
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 42,339评论 2赞 342