手动链接react native的依赖

最新推荐文章于 2024-08-10 07:56:27 发布

慕天远

最新推荐文章于 2024-08-10 07:56:27 发布

阅读量2.2k

点赞数 1

如何安装一个本地依赖

本文译自：https://engineering.brigad.co/demystifying-react-native-modules-linking-964399ec731b

在这篇文章中，我使用react-native-webview作为例子，但是你要记住这种方式对于其他的不需要额外链接步骤的包都是有效的。

当你需要一个依赖的时候，你可以将其添加到你的项目中，运行yarn add react-native-webview，然后等待安装完成。

当你向原生代码中添加了依赖后，你也需要link一下它。Link 的作用就是告诉react native原生代码其所需要的代码块在哪里，完成这一步我们需要运行一个简单的命令： react-native link react-native-webview

link 是一个编辑你项目配置文件的命令。但是它依赖于字符串匹配的模式，所以如果你频繁更改你的文件的话那就很容易出现问题。

确认你的依赖已经link成功了

在android上，link只会更改3个文件。

首先会编辑的文件是settings.gradle。gradle通过这个文件来找到所添加的项目依赖在哪里。

当你第一次初始化一个项目的时候，这个文件长这个样子：

当你运行完link命令后，它会在后面添加两行代码。在成功运行link命令后，它看起来是下面这个样子

rootProject.name = 'example'
include ':react-native-webview'
project(':react-native-webview').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-webview/android')

include ':app'

那么第二个被更改的文件是app/build.gradle。在你的项目中有两个这样的文件，不要改错了哦

这个文件定义了构建你的项目所需要的东西，，比如 SDK版本，构建规则以及相关依赖。

在一个纯净的项目中，他看起来是这个样子，但是在这里我们只需要关注这几行：

dependencies {
    implementation fileTree(dir: "libs", include: ["*.jar"])
    implementation "com.android.support:appcompat-v7:${rootProject.ext.supportLibVersion}"
    implementation "com.facebook.react:react-native:+"  // From node_modules
}

每当你运行一次link命令，其就会添加一行代码，通过这种方式来添加外部的项目依赖。

dependencies {
    implementation project(':react-native-webview')
    implementation fileTree(dir: "libs", include: ["*.jar"])
    implementation "com.android.support:appcompat-v7:${rootProject.ext.supportLibVersion}"
    implementation "com.facebook.react:react-native:+"  // From node_modules
}

最后一个被更改的文件是app/src/main/java/com/example/MainApplication.java

纯净的文件在这里，但是在这里我们只需关注这一部分代码，link命令更改了imports部分和getPackages()方法。

下面是link命令执行之前的imports部分：

package com.example;

import android.app.Application;

import com.facebook.react.ReactApplication;
import com.facebook.react.ReactNativeHost;
import com.facebook.react.ReactPackage;
import com.facebook.react.shell.MainReactPackage;
import com.facebook.soloader.SoLoader;

import java.util.Arrays;
import java.util.List;

link命令执行完之后其会在imports部分中添加一行代码来关联到相应的库。

package com.example;

import android.app.Application;

import com.facebook.react.ReactApplication;
import com.reactnativecommunity.webview.RNCWebViewPackage;
import com.facebook.react.ReactNativeHost;
import com.facebook.react.ReactPackage;
import com.facebook.react.shell.MainReactPackage;
import com.facebook.soloader.SoLoader;

import java.util.Arrays;
import java.util.List;

如果你想知道所导入的全路径名，你可以在node_modules中的java文件中找到这个路径，在其中你只需要用/来代替，就行了。

一个纯净的getPackages()方法是这样子的：

 @Override
    protected List<ReactPackage> getPackages() {
      return Arrays.<ReactPackage>asList(
          new MainReactPackage()
      );
}

link命令在列表中添加了新的包

 @Override
    protected List<ReactPackage> getPackages() {
      return Arrays.<ReactPackage>asList(
          new MainReactPackage(),
            new RNCWebViewPackage()
      );
}

需要注意的是，所有的react-native-navigation用户，其对MainApplication.java文件所做的更改通常都会丢失最后这一步，所以你需要手动的将这个包添加到列表中。

好了你的依赖现在已经成功连接了。