react-native第三方组件之react-native-splash-screen报错解决

引言：在10月-11月这一个月的时间，本人用React做了一个电商的项目。通过该项目，本人对React的理解有更进了一步。目前，该项目已经基本完成，于是又想起了之前被我暂且搁置的react-native项目。近日，重新拾起该react-native项目。遇到的第一个问题就是第三方组件的引入，第一个组件便是react-native-splash-screen。在引入该组件的过程中遇到了非常多的问题，花了整整4天的时间，终于将该组件成功引入（react-native<0.6）。现将引入中遇到的问题与解决方案记录如下。

第三方组件的引入方法是react-naive开发中必须掌握的技能，而启动屏组件react-native-splash-screen几乎是每个项目必备功能。因此，如何将第三方组件react-native-splash-screen成功引入到自己的项目中尤为重要。

一.开发环境

鉴于不同的开发环境下，遇到的问题不尽相同，对同一问题的解决方案也不一样。因此，将本人的开发环境简述如下：

本人使用windows系统，基于react-native进行Android的开发。

react-native<0.6.0。（react-native<0.6.0时，组件为手动连接，连接方式与官网所述相同；react-native>0.6.0时，组件改为自动连接，引入时会报错，本人目前没有成功引入，在官网也没有找到相应方法。）

附：经本人实践，react-native>0.6.0时，该组件的已经成功引入，具体方法可见该博客：https://blog.csdn.net/weixin_43762903/article/details/103338875

二.报错及其解决

本人认为，引入该组件的过程中所产生的报错大致可分为两类：一是版本报错，二是逻辑报错。

（1）版本报错

插件的Git主使用的Gradle版本或SDK版本，与本地的Gradle版本或SDK版本不匹配，导致报错。

该种报错常见的报错信息有：

Cannot get property 'compileSdkVersion' on extra properties extension as it does not exist

Could not find method implementation() for arguments [directory 'libs'] on object of type org.gradle.api.internal.artifacts.dsl.dependencies.DefaultDependencyHandler.

Could not find method testImplementation() for arguments [junit:junit:4.12] on object of type org.gradle.api.internal.artifacts.dsl.dependencies.DefaultDependencyHandler.

具体报错如下图：



解决方案：

总得来说，解决方式就是更改Gradle和SDK的版本，使之成功引入。涉及到的文件有如下三个：

android\build.gradle

android\gradle\wrapper\gradle-wrapper.properties

android\app\build.gradle

首先，查看自己AndroidStudio安装目录下的gradle文件夹，有哪些版本的gradle文件存在。比如说我的是这样：

当然，每个人的情况都不一样。一般来说，有1-2个可用的版本即可，如果没有，可以到下面的地址自行下载，下载完放到对应的目录里即可（注意不要解压）。

https://www.androiddevtools.cn/

打开gradle-wrapper.properties文件，将其中的gradle版本改为本地存在的gradle版本（只需要改动数字即可）

其次，分别打开android\build.gradle与android\app\build.gradle文件，需要进行修改的地方如下图所示：


说明：不是版本越低越好，也不是版本越高越好，而需要的是各个版本之间的配合使用。因此，本人无法给出全部的适配性，只能带给读者一种可行的方式。经本人实践，将文件各处按照以上图片进行修改，是可行的。

（2）逻辑报错

想不出什么词语来形容了，因此暂且叫做逻辑报错，即除了版本不匹配以外各种原因导致的报错。造成这种报错的原因可能有很多种，在此只能将本人所遇到的问题及解决方式列举如下，以后遇到再不断补充。

① Could not find appcompat-v7.aar (com.android.support:appcompat-v7:26.1.0).

Could not resolve all files for configuration ':app:debugCompileClasspath'.
> Could not find appcompat-v7.aar (com.android.support:appcompat-v7:26.1.0).
  Searched in the following locations:
      https://jcenter.bintray.com/com/android/support/appcompat-v7/26.1.0/appcompat-v7-26.1.0.aar
> Could not find support-v4.aar (com.android.support:support-v4:26.1.0).
  Searched in the following locations:
      https://jcenter.bintray.com/com/android/support/support-v4/26.1.0/support-v4-26.1.0.aar
> Could not find support-fragment.aar (com.android.support:support-fragment:26.1.0).
  Searched in the following locations:
      https://jcenter.bintray.com/com/android/support/support-fragment/26.1.0/support-fragment-26.1.0.aar
> Could not find animated-vector-drawable.aar (com.android.support:animated-vector-drawable:26.1.0).
  Searched in the following locations:
      https://jcenter.bintray.com/com/android/support/animated-vector-drawable/26.1.0/animated-vector-drawable-26.1.0.aar
> Could not find support-vector-drawable.aar (com.android.support:support-vector-drawable:26.1.0).
  Searched in the following locations:
      https://jcenter.bintray.com/com/android/support/support-vector-drawable/26.1.0/support-vector-drawable-26.1.0.aar
> Could not find support-core-ui.aar (com.android.support:support-core-ui:26.1.0).
  Searched in the following locations:
      https://jcenter.bintray.com/com/android/support/support-core-ui/26.1.0/support-core-ui-26.1.0.aar

解决方法：

在build.gradle文件中对应位置加入如下代码：

② ReactApplication com.facebook.react

E:\exercise\rn\rn-test\test\android\app\src\main\java\com\test\MainApplication.java:5: 错误: 找不到符号
import com.facebook.react.ReactApplication;
                         ^
  符号:   类 ReactApplication
  位置: 程序包 com.facebook.react
E:\exercise\rn\rn-test\test\android\app\src\main\java\com\test\MainApplication.java:6: 错误: 程序包org.devio.rn.splashscreen不存在
import org.devio.rn.splashscreen.SplashScreenReactPackage;
                                ^
E:\exercise\rn\rn-test\test\android\app\src\main\java\com\test\MainApplication.java:7: 错误: 找不到符号
import com.facebook.react.ReactNativeHost;
                         ^
  符号:   类 ReactNativeHost
  位置: 程序包 com.facebook.react
E:\exercise\rn\rn-test\test\android\app\src\main\java\com\test\MainApplication.java:15: 错误: 找不到符号
public class MainApplication extends Application implements ReactApplication {
                                                            ^
  符号: 类 ReactApplication
E:\exercise\rn\rn-test\test\android\app\src\main\java\com\test\MainApplication.java:17: 错误: 找不到符号
  private final ReactNativeHost mReactNativeHost = new ReactNativeHost(this) {
                ^
  符号:   类 ReactNativeHost
  位置: 类 MainApplication
E:\exercise\rn\rn-test\test\android\app\src\main\java\com\test\MainApplication.java:38: 错误: 找不到符号
  public ReactNativeHost getReactNativeHost() {
         ^
  符号:   类 ReactNativeHost
  位置: 类 MainApplication
E:\exercise\rn\rn-test\test\android\app\src\main\java\com\test\MainActivity.java:5: 错误: MainActivity不是抽象的, 并且未覆盖ReactActivity中的抽象方法getPackages()
public class MainActivity extends ReactActivity {
       ^
E:\exercise\rn\rn-test\test\android\app\src\main\java\com\test\MainApplication.java:17: 错误: 找不到符号
  private final ReactNativeHost mReactNativeHost = new ReactNativeHost(this) {
                                                       ^
  符号:   类 ReactNativeHost
  位置: 类 MainApplication
E:\exercise\rn\rn-test\test\android\app\src\main\java\com\test\MainApplication.java:37: 错误: 方法不会覆盖或实现超类型的方法
  @Override
  ^
9 个错误
:app:compileDebugJavaWithJavac FAILED

解决方法：

每个maven仓库链接都应该有自己单独的maven标签。所以要将marven分开来写，而不能写到一起：

③错误: 程序包com.cboy.rn.splashscreen不存在

E:\exercise\rn\rn-test\test\android\app\src\main\java\com\test\MainActivity.java:4: 错误: 程序包com.cboy.rn.splashscreen不存在
import com.cboy.rn.splashscreen.SplashScreen;
                               ^
E:\exercise\rn\rn-test\test\android\app\src\main\java\com\test\MainActivity.java:15: 错误: 找不到符号
        SplashScreen.show(this);  // 添加这一句
        ^
  符号:   变量 SplashScreen
  位置: 类 MainActivity
2 个错误
:app:compileDebugJavaWithJavac FAILED

这个报错是非常坑啊。明明都按照官网进行配置，但仍然报错。原因我们需要在com.cboy.rn下引入的资源，目前已经转移到了org.devio.rn中。但是官网并没有说呀。

解决方法：

在MainApplication.java中添加：

import org.devio.rn.splashscreen.SplashScreenReactPackage;

在MainActivity.java中添加：

import org.devio.rn.splashscreen.SplashScreen;

④ No resource found that matches the given name (at ‘background’ with value ‘@drawable/launch_screen’).

原因：缺少两个drawable资源。

**解决方法：**将官网给出了example代码clone下来，在下图所示的文件目录下可发现drawable-xhdpi与drwa-xxhdpi两个文件夹。而自己的工程文件相应目录并不存在这两个文件夹。将这两个文件夹复制到自己工程文件相应的目录即可。

总结：

①虽然导入第三方组件对于react-native项目来说尤为重要，但其实现起来非常困难，需要开发者准备好充足的耐心、信心与恒心。在解决问题时，要多到网上寻找相应答案，并及时记录下来。

②android/app/build文件夹为缓存文件夹，为了解决某一报错而做了关键改动后，可以尝试将该文件夹删除之后，再重新运行。