NPM 包 React-Native-LinkedIn-SDK 使用教程

阅读时长 8 分钟读完

React Native 是一项跨平台的应用程序开发框架,使开发人员能够使用 JavaScript 和 React 开发出原生应用程序。LinkedIn SDK 是 LinkedIn 提供的开发工具包,可用于构建社交应用和整合第三方应用。在目前的移动开发环境中,LinkedIn SDK 对于建立专业和现代应用程序至关重要,因为它为应用程序添加了丰富的互动体验和提供了强大的社交链接功能。

在该文章中,我们将介绍 React-Native-LinkedIn-SDK 的基本用法和详细的使用指南。

React-Native-LinkedIn-SDK 基本用法

React-Native-LinkedIn-SDK 是 LinkedIn SDK 的 React Native 版本,它可以直接集成到 React Native 应用程序中,并且能够转移到各个平台。使用 React-Native-LinkedIn-SDK,可以在应用程序中实现许多 LinkedIn 的功能,例如登陆、个人资料访问、分享等等。

安装

使用 React-Native-LinkedIn-SDK 需要用到如下依赖库: react-native 手动链接库和 rnpm。

使用以下命令行安装依赖库:

链接到 React Native 应用

React-Native-LinkedIn-SDK 由于包含 Objective-C 代码,需要将其链接到 React Native 应用中的原生代码。因此,我们需要使用“react-native link”命令链接该库到 React Native 应用。

使用以下命令行链接:

使用

在你的 React Native 应用代码中,首先在你的组件文件中导入 LinkedInButton :

然后在你需要的地方渲染 LinkedInButton 组件:

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

在渲染组件时,您需要设置以下参数:

  • onPress:当用户按下 LinkedInButton 时,执行的回调函数。
  • clientID:LinkedIn 应用程序的客户端 ID,可以在 LinkedIn Developer 面板中获取。
  • clientSecret:LinkedIn 应用程序的客户端密钥,可以在 LinkedIn Developer 面板中获取。
  • redirectUrl:当用户通过 LinkedIn 登录后,LinkedIn 将重定向到的 URL。此 URL 必须与“回调 URL”字段中的 URL 匹配。
  • scopes:要请求的 OAuth 2.0 的权限。按需添加,多个权限以逗号分隔。详情请参见 LinkedIn 开发者 API 指南:https://developer.linkedin.com/docs/fields
  • state:您自己设定的 state 值。callback 方法中将返回此值。
  • linkText:LinkedInButton 的文本。

使用指南

本节中将介绍如何集成 React-Native-LinkedIn-SDK 到 React Native 应用程序中。

创建 LinkedIn 应用

首先,在 LinkedIn Developer 应用管理器中申请 API 密钥、Secret 和 Redirect URL,创建和配置您自己的 LinkedIn 应用程序。创建应用程序后,记住 client ID 和 clientSecret,因为将用于配置 React-Native-LinkedIn-SDK。

配置 LinkedIn 应用

在 LinkedIn Developer 应用管理器中,配置您的应用以使用新选项卡“OAuth 2.0 配置”来配置。在这个选项卡中,设置回调 URL。当您试图通过 LinkedIn 登录时,LinkedIn 将使用此 URL 重定向到您的应用程序。

添加 React-Native-LinkedIn-SDK 到 React Native 应用程序

使用下面的代码:

链接到 React Native 应用

使用以下命令行链接:

集成 LinkedInButton 到你的 React Native 应用

在上一节中,我们已经介绍了如何使用 LinkedInButton 组件集成到 React Native 应用程序中。复制上一节的代码,并将其添加到您的 React Native 应用程序的 App.js 文件中即可。

示例代码

在下面的示例代码中,我们编写了一个 React Native 应用程序,包含 LinkedIn 登录功能。

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

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

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

结论: 以上就是 React-Native-LinkedIn-SDK 的使用指南和基本用法说明。如果你在使用过程中有任何问题,也可以在 Github 对应仓库上获取更多的支持。如果觉得本文很有帮助,也希望能给个 star ⭐️ 鼓励一下。

来源:JavaScript中文网 ,转载请注明来源 https://www.javascriptcn.com/post/600564f681e8991b448e1955

纠错
反馈