如何安装一个本地依赖

本文译自：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()方法是这样子的：

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

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

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

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

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

手动链接react native的依赖相关推荐

React Native实现一个带筛选功能的搜房列表（2）
原文链接React Native实现一个带筛选功能的搜房列表(2) 在上一篇中,我们实现了一个下拉刷新和上拉加载更多的列表,那根据一般的开发步骤,接着应该就是进行网络请求,在网络请求之后更新列表数据和 ...
如何在React Native中构建项目并管理静态资源
by Khoa Pham 通过Khoa Pham 如何在React Native中构建项目并管理静态资源 (How to structure your project and manage stati ...
react native在growth stack中的角色思考
Growth Hacker在国内外的互联网界近几年都是比较火热的词,互联网巨头Facebook也许是践行Growth Hacker最好的公司.然而概念吵的火并不等于做的好,如何落地Growth Hac ...
从 Android 到 React Native 开发（四、打包流程解析和发布为 Maven 库）
1.从 Android 到 React Native 开发(一.入门) 2.从 Android 到 React Native 开发(二.通信与模块实现) 3.从 Android 到 React Nat ...
React Native windows环境搭建
1.首先准备下载必须的依赖:Node.JDK .Android Studio.夜神模拟器 ①Node可以直接到官网下载,版本必须大于14,我这边用的是v16.15.1 ②Jave JDK,我直接在 ...
React Native使用指南-使用链接库
并不是所有的APP都需要使用全部的原生功能,包含支持全部特性的代码会增大应用的体积.但我们仍然希望能让你简单地根据自己的需求添加需要的特性. 在这种思想下,我们把许多特性都发布成为互不相关的静态库. ...
在 iOS 与 Android 上实现 React Native 应用深度链接，通过 URL 打开到指定页面
在 iOS 与 Android 上实现 React Native 应用深度链接,使得应用可以通过我们生活在一个万物兼可分享的年代,而分享的过程,几乎最终都会分享某一个链接,那么,作为开发者,最常遇到 ...
React Native开发错误警告处理总结（已解决！持续更新）
注:本文是我在开发过程中遇到问题解决方法的总结,之后会持续更新,希望帮助到更多的学习者.文中有不妥的地方希望指出共同学习,同时欢迎大神补充.(之后我会放出自己开发整理的笔记和GithubDemo地址, ...
如何在React Native和Firebase中设置Google登录
Google sign-in is a great login feature to offer to your app's users. It makes it easier for them to ...
如何使用动态工具提示构建React Native图表
by Vikrant Negi 通过Vikrant Negi 如何使用动态工具提示构建React Native图表 (How to build React Native charts with dyn ...

手动链接react native的依赖

如何安装一个本地依赖

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

手动链接react native的依赖相关推荐

最新文章

热门文章