npm 包 react-native-linkedin-oauth 使用教程

在前端开发中，我们经常需要使用第三方的 API 来完成一些特定的功能，例如社交登录、数据传输等。LinkedIn 是一个流行的职业社交网站，它的用户群体覆盖了全球各地的职场人士和学生。那么，如何在 React Native 中实现 LinkedIn 登录功能呢？这就涉及到了 npm 包 react-native-linkedin-oauth。

1. 安装

使用 npm 安装 react-native-linkedin-oauth：

npm install react-native-linkedin-oauth --save

2. 创建 LinkedIn 应用

在实现 LinkedIn 登录之前，我们需要先创建一个 LinkedIn 应用，这样才能获取到 API key 和 secret。具体步骤如下：

1. 在 LinkedIn 开发者页面 中创建一个应用。
2. 在 “Auth” 页面中设置重定向 URL 和授权页面 URL。
3. 在 “Auth” 页面中查看 API key 和 secret。

3. 在 React Native 中使用

为了使用 react-native-linkedin-oauth，我们需要在 React Native 项目中添加对应的 Native 模块。由于不同平台的设置方式可能不同，下面将分别介绍 iOS 和 Android 平台的配置方法。

iOS

1. 打开项目路径下的 ios 文件夹，双击打开 *.xcworkspace 工程文件。
2. 右键点击项目名称，选择 “Add Files to …”。
3. 选择 node_modules/react-native-linkedin-oauth/ios/RNLinkedInOAuth.xcodeproj 添加到项目中。
4. 选中项目，在 Build Phases-Link Binary With Libraries 中添加 libRNLinkedInOAuth.a。

Android

1. 安装 react-native-cli 命令行工具并初始化一个 React Native 项目。

2. 添加 LinkedIn 应用的 API key 和 secret 至项目的 build.gradle 文件中：

   project.ext {
       …
       linkedinApiKey = "你的 API key"
       linkedinSecretKey = "你的 secret"
   }

3. 打开 Android 工程下的 settings.gradle 文件，在文件末尾添加：

   include ':react-native-linkedin-oauth'
   project(':react-native-linkedin-oauth').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-linkedin-oauth/android')

4. 打开 Android 工程下的 app/build.gradle 文件，在文件末尾添加：

   dependencies {
       …
       implementation project(':react-native-linkedin-oauth')
   }

在 React Native 中使用

1. 导入 react-native-linkedin-oauth：

   import LinkedInModal from 'react-native-linkedin-oauth';

2. 使用 LinkedInModal 组件实现登录：

   -- -------------------- ---- -------
   ------ - -- ----- ---- --------
   ------ - ----- ------ - ---- ---------------
   ------ ------------- ---- ------------------------------
   
   ------ ------- ----- ----------- ------- --------------- -
       ----- - -
           --------------- ------
           ------------ -----
       -
   
       ----------------- - ----------- -- -
           --------------- --------------- --------- ---
       -
   
       ------------- - ------------- -- -
           --------------- ------------ ----------- ---
       -
   
       ------------ - -- -- -
           --------------------- ----- --- ------------
           --------------- ------------ ---- ---
           ------------------------------
       -
   
       ----------- - ------- -- -
           ----------------------- ----- -------- -------
           --------------- ------------ ---- ---
           ------------------------------
       -
   
       -------- -
           ------ -
               ----- -------- ----- -- --------------- --------- ----------- -------- ---
                   ------- ------------ ---- --------- ----------- -- ----------------------------- --
                   --------------
                       ------------ --- ----
                       ---------------- -------
                       ------------------ ----
                       ------------------------------
                       --------------------------
                       ----------------------------
                       -----------------------------------
                   --
               -------
           --
       -
   -

4. 总结

通过以上步骤，我们就可以在 React Native 中实现 LinkedIn 登录功能了。当然，不同的项目具有不同的需求，上面的代码只是一个示例。当你需要在自己的项目中使用 react-native-linkedin-oauth 时，也许需要根据具体的需求进行相应的调整。

以此为例，我们可以学习到如何在 React Native 中使用第三方 API，如何创建一个 LinkedIn 应用，以及如何使用自定义 Native 模块。这些都是前端开发中非常基础而重要的知识点，在实际开发中也经常会用到。因此，我们需要对它们进行深入的学习，并不断实践，从而不断提升自己的技能水平。

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60055fc081e8991b448dd0d8