react-native运行步骤及记录一些坑

| |

build.gradle 配置

android/app/build.gradle

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
android {  // 对应版本
  compileSdkVersion 24
  buildToolsVersion "24.0.2" 
  // D:\Windows\Android\sdk\build-tools // 查看版本

  defaultConfig {
    applicationId "com.awesomeproject"
    minSdkVersion 16
    targetSdkVersion 24
    versionCode 1
    versionName "1.0"
    ndk {
        abiFilters "armeabi-v7a", "x86"
    }
  }
}
1
2
3
4
5
6
7
dependencies {
    compile fileTree(dir: "libs", include: ["*.jar"])
    compile "com.android.support:appcompat-v7:24.2.1" 
  // D:/Windows/Android/sdk/extras/android/m2repository/com/android/support/appcompat-v7/
    compile "com.facebook.react:react-native:+"
  // From node_modules
}

运行

  • 真机运行 【推荐】
    • 与虚拟器中运行的兼容性不同，以真机为准
    • adb
      • adb devices 检测真机是否连接成功
      • adb shell input keyevent 82 调起任务栏

  • 或 虚拟器运行

    • Genymotion 【推荐】
      • 偶尔启动失败问题：升级VirtualBox版本
    • 自带的 Android Device Emulator（配置比较多坑）
    1
    2
    3
    4
    adb devices // 打印设备列表，确保设备已连接
    npm install // 添加包含原生代码的库
    react-native link // 根据package.json中的依赖链接原生库
    react-native run-android // 运行项目

运行中遇到的坑

版本报错：build_gradle对应版本 / 依赖库中的最低版本依赖

解决：
升级到依赖库中的最低版本，并确保sdk版本已安装

连接设备报错

could not get BatchedBridge

1
could not get BatchedBridge, make sure your bundle is packaged correctly

解决：

1
2
adb devices // 输出设备列表，模拟器
adb reverse tcp:8081 tcp:8081

真机设置
dev setting -> debug server host for device -> localhost:8081

fbBatchedBridge is undefined

1
failed to call funciton, __fbBatchedBridge is undefined

解决：
保证电脑和app启动在同一个局域网下，指定本机ip地址和端口号

1
2
3
4
5
// 项目根目录，--host为本机ip地址
react-native start --host 10.1.102.80 --port 8081

// 另一个控制台
react-native run-android

模块安装报错：can’t delete / create path

1
Error: Cannot create directory E:\react-native-JueJinClient-master1\android\app\build\intermediates\merged.dir\values

解决：

1
cd android && gradlew clean

依赖库版本报错：min-sdk-version>=26

解决：


lottie-react-native

应用方法数报错

  1. build.gradle

    1
    2
    3
    4
    5
    6
    7
    8
    android {
            defaultConfig {
              multiDexEnabled = true
            }
    }
    dependencies {
            compile 'com.android.support:multidex:1.0.1'
    }

  2. 添加依赖

    1
    2
    3
    import android.support.multidex.MultiDexApplication;

    public class MainApplication extends MultiDexApplication implements ReactApplication

混淆报错：release 报错 proguard

1
unable to process incoming event 'ProcessComplete' <ProgressCompleteEvent>

解决：

1
cd android && gradlew.bat assembleRelease --console plain // 查找原因

思路：

  1. 新功能单独打包，排查是否是库文件混淆问题。
    是，则查找库文件相关的混淆规则；
    否，则查看项目源码中更改的地方，并加上相应的混淆规则。

  2. 相关库是否需要加上混淆的规则 如在库的github中查找

  3. 用android studio打包，可以查看具体出错的类


  4. 添加规则

    1
    2
    3
    4
    5
    # react-native-webrtc
    -keep class org.webrtc.** {*;}
    -dontwarn org.webrtc.**
    -keep class org.chromium.** {*;}
    -dontwarn org.chromium.**

  5. 如果还是报错，尝试提高库文件的sdk版本

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    android {
            compileSdkVersion 26
            buildToolsVersion "26.0.3"

            defaultConfig {
              minSdkVersion 16
              targetSdkVersion 23
              versionCode 1
              versionName "1.0"
              ndk {
                abiFilters "armeabi-v7a", "x86"
              }
            }
    }

Chrome调试报错

1
    Attempted to transition from state `RESPONDER_INACTIVE_PRESS_IN` to `RESPONDER_ACTIVE_LONG_PRESS_IN`, which is not supported. This is most likely due to `Touchable.longPressDelayTimeout` not being cancelled

解决：
开启Debug JS Remotely模式下chrome调试，使用TouchableHighlight会出现以上报错，建议关闭Chrome调试或重启apk

build时间比较长的问题

原因：依赖的库的云下载时间长

  1. build一次后，android/app/build 生成，第一次生成build的时间会比较长
  2. 再次执行build前，删除以下文件夹
    android\app\build\generated
    android\app\build\intermediates\classes
    android\app\build\intermediates\incremental
  3. 如果报错 can’t delete node_modules其他库的build子文件夹，执行 cd android && gradlew clean

其他命令

1
2
3
4
5
6
7
cd android && gradlew clean // 清除所有的构建任务的output，包含apk文件
gradlew check // 执行Lint检查并且能够在Lint检测到错误后停止运行
gradlew build // 执行assemble和check
gradlew connectedCheck // 在测试机上执行所有测试任务
gradlew deviceCheck // 执行所有在远程设备上的测试任务
gradlew installDebug
gradlew installRelease // 在设备上安装一个Debug/Release版本