首页 > 解决方案 > 升级 React Native 0.61.5:Android 卡在闪屏

问题描述

我将 React Native 升级到 0.61.5,iOS 和 Android 部分编译成功。iOS 应用程序也成功启动,但 Android 应用程序不成功。

Android 应用程序启动并卡在初始屏幕上,没有错误,所以我激活了日志adb logcat,发现关于 Flipper 的错误:

System.err: java.lang.ClassNotFoundException: com.facebook.flipper.ReactNativeFlipper

经过2天的尝试,我不知道如何解决这个问题。我已经遵循 React Native 0.6+ 和所有包的所有迁移过程。这就是我所在的位置:

包.json

    "dependencies": {
        "@fortawesome/fontawesome-svg-core": "^1.2.25",
        "@fortawesome/pro-light-svg-icons": "^5.11.2",
        "@fortawesome/pro-solid-svg-icons": "^5.11.2",
        "@fortawesome/react-native-fontawesome": "^0.1.0",
        "@react-native-community/async-storage": "^1.6.3",
        "@react-native-community/netinfo": "^4.6.1",
        "@react-native-firebase/analytics": "^6.1.0",
        "@react-native-firebase/app": "^6.1.0",
        "bugsnag-react-native": "^2.23.2",
        "react": "16.9.0",
        "react-native": "0.61.5",
        "react-native-config": "^0.11.7",
        "react-native-dark-mode": "^0.2.1",
        "react-native-datepicker": "^1.7.2",
        "react-native-device-info": "^5.3.1",
        "react-native-gesture-handler": "^1.5.2",
        "react-native-iphone-x-helper": "^1.2.1",
        "react-native-keychain": "^4.0.1",
        "react-native-picker-select": "^6.3.3",
        "react-native-reanimated": "^1.4.0",
        "react-native-screens": "^2.0.0-alpha.17",
        "react-native-svg": "^9.13.3",
        "react-navigation": "^4.0.10",
        "react-navigation-drawer": "^2.3.3",
        "react-navigation-stack": "^1.10.3",
        "react-redux": "^7.1.1",
        "redux": "^4.0.1",
        "redux-logger": "^3.0.6",
        "redux-thunk": "^2.3.0"
    },
    "devDependencies": {
        "@babel/core": "^7.6.2",
        "@babel/preset-env": "^7.2.0",
        "@babel/runtime": "^7.6.2",
        "@types/enzyme": "^3.1.15",
        "@types/enzyme-adapter-react-16": "^1.0.3",
        "@types/jest": "^24.0.12",
        "@types/node": "^12.11.5",
        "@types/react": "^16.8.16",
        "@types/react-native": "^0.60.23",
        "@types/react-native-datepicker": "^1.7.0",
        "@types/react-native-vector-icons": "^6.4.4",
        "@types/react-navigation": "^3.4.0",
        "@types/react-redux": "^7.0.8",
        "@types/react-test-renderer": "^16.8.1",
        "@types/redux-logger": "^3.0.6",
        "@types/sinon": "^7.0.2",
        "babel-jest": "^24.8.0",
        "babel-plugin-transform-remove-console": "^6.9.4",
        "enzyme": "^3.7.0",
        "enzyme-adapter-react-16": "^1.7.0",
        "enzyme-to-json": "^3.3.5",
        "jest": "^24.8.0",
        "jest-fetch-mock": "^2.0.1",
        "metro-react-native-babel-preset": "^0.57.0",
        "pre-commit": "^1.2.2",
        "react-dom": "^16.6.3",
        "react-test-renderer": "^16.12.0",
        "sinon": "^7.2.2",
        "snapshot-diff": "^0.4.1",
        "ts-jest": "^24.0.2",
        "tslint": "^5.17.0",
        "typescript": "^3.7.3"
    },

android/app/build.gradle

dependencies {
    implementation fileTree(dir: "libs", include: ["*.jar"])
    implementation "com.facebook.react:react-native:+"  // From node_modules
    implementation 'androidx.appcompat:appcompat:1.1.0-rc01'
    implementation 'androidx.swiperefreshlayout:swiperefreshlayout:1.1.0-alpha02'

    if (enableHermes) {
        def hermesPath = "../../node_modules/hermes-engine/android/";
        debugImplementation files(hermesPath + "hermes-debug.aar")
        releaseImplementation files(hermesPath + "hermes-release.aar")
    } else {
        implementation jscFlavor
    }
}

configurations.all {
     resolutionStrategy {
       force "com.facebook.soloader:soloader:0.8.0"
     }
}

// Run this once to be able to run the application with BUCK
// puts all compile dependencies into folder libs for BUCK to use
task copyDownloadableDepsToLibs(type: Copy) {
    from configurations.compile
    into "libs"
}

apply from: file("../../node_modules/@react-native-community/cli-platform-android/native_modules.gradle"); applyNativeModulesAppBuildGradle(project)

apply plugin: "com.google.gms.google-services"

MainActivity.java

package com.dedge.centralinventory;

import android.os.Bundle;
import com.facebook.react.ReactFragmentActivity;
import com.facebook.react.ReactActivityDelegate;
import com.facebook.react.ReactRootView;
import com.swmansion.gesturehandler.react.RNGestureHandlerEnabledRootView;

public class MainActivity extends ReactFragmentActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(null);
    }

    @Override
    protected ReactActivityDelegate createReactActivityDelegate() {
        return new ReactActivityDelegate(this, getMainComponentName()) {
            @Override
            protected ReactRootView createRootView() {
                return new RNGestureHandlerEnabledRootView(MainActivity.this);
            }
        };
    }
}

MainApplication.java

package com.dedge.centralinventory;

import android.app.Application;
import android.content.Context;
import com.facebook.react.PackageList;
import com.facebook.react.ReactApplication;
import com.facebook.react.ReactNativeHost;
import com.facebook.react.ReactPackage;
import com.facebook.soloader.SoLoader;

import java.lang.reflect.InvocationTargetException;
import java.util.List;

public class MainApplication extends Application implements ReactApplication {

    private final ReactNativeHost mReactNativeHost = new ReactNativeHost(this) {
        @Override
        public boolean getUseDeveloperSupport() {
            return BuildConfig.DEBUG;
        }

        @Override
        protected List<ReactPackage> getPackages() {
            @SuppressWarnings("UnnecessaryLocalVariable")
            List<ReactPackage> packages = new PackageList(this).getPackages();
            // Packages that cannot be autolinked yet can be added manually here, for example:
            // packages.add();
            return packages;
        }

        @Override
        protected String getJSMainModuleName() {
            return "index";
        }
    };

    @Override
    public ReactNativeHost getReactNativeHost() {
        return mReactNativeHost;
    }

    @Override
    public void onCreate() {
        super.onCreate();
        SoLoader.init(this, /* native exopackage */ false);
        initializeFlipper(this); // Remove this line if you don't want Flipper enabled
    }

    /**
     * Loads Flipper in React Native templates.
     *
     * @param context
     */
    private static void initializeFlipper(Context context) {
        if (BuildConfig.DEBUG) {
            try {
                /*
                 * We use reflection here to pick up the class that initializes Flipper, since
                 * Flipper library is not available in release mode
                 */
                Class<?> aClass = Class.forName("com.facebook.flipper.ReactNativeFlipper");
                aClass.getMethod("initializeFlipper", Context.class).invoke(null, context);
            } catch (ClassNotFoundException e) {
                e.printStackTrace();
            } catch (NoSuchMethodException e) {
                e.printStackTrace();
            } catch (IllegalAccessException e) {
                e.printStackTrace();
            } catch (InvocationTargetException e) {
                e.printStackTrace();
            }
        }
    }
}

我试图删除这条线initializeFlipper(this);,但它没有改变任何东西。

解决

最后我解决了我的问题。initializeFlipper(this);是我问题的第一部分。它与最新版本的 React Native (0.61.x) 不兼容。所以我删除了这条线。

接下来我已经删除了升级 React Native 并且我忘记了删除将应用程序卡在启动屏幕上的react-native-splash-screens覆盖。protected void onCreate(Bundle savedInstanceState)MainActivity.java

标签: javaandroidreactjsfacebookreact-native

解决方案


推荐阅读