npm 包 react-native-run-umshare 使用教程-JavaScript中文网-JavaScript教程资源分享门户

介绍

在开发 React Native 应用时，我们经常需要使用第三方库来实现某些功能。其中一些库需要打包原生模块，这就需要我们使用 react-native link 来链接原生模块。但是在使用这个命令时，很容易出现链接错误或者缺少依赖的情况。为了避免这种情况，我们可以使用 react-native-run-umshare 这个 npm 包来帮助我们自动完成链接和依赖的安装等操作。

react-native-run-umshare 是一个用于在 React Native 应用中集成友盟分享的 npm 包。使用它能够帮助我们快速的集成友盟分享功能，无需手动配置多个文件以及复制粘贴大量的代码。

安装

安装 react-native-run-umshare:

$ npm install react-native-run-umshare --save

配置

iOS

首先，我们需要在[友盟官网][1]申请一个账号，并创建一个应用。创建应用之后，记录下 AppKey 和 AppSecret，我们需要在 App 中使用这些密钥来访问友盟服务。
打开 Xcode，依次进行如下操作：
- 在项目导航器中，选中自己的项目。
- 选择自己的项目配置。
- 选择"Build Phases"标签。
- 选择"Link Binary With Libraries"。
- 点击 "+" 添加以下依赖库：
```
libz
libsqlite3
libc++
```
- 在"Build Phases"中，点击 "+" -> "New Run Script Phase"，然后在脚本框中输入以下内容：
```
"$SRCROOT"/../node_modules/react-native-run-umshare/ios/UMReactNative.sh
```

将以下代码添加到 AppDelegate.m 文件中：

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

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

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

注意，其中 AppKey，WechatSession appKey 和 WechatSession appSecret 都需要替换为自己在友盟管理后台申请的密钥。

如果只需要集成某一个分享平台，只需要将其他平台的代码删除即可。

在 AppDelegate.m 的 handleOpenURL 和 openURL 方法中添加以下代码：

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

-- ---

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

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

Android

在 MainActivity.java 里添加以下代码：

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

-- ---

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

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

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

-- ---

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

注意，其中 AppKey，Weixin appKey 和 Weixin appSecret 都需要替换为自己在友盟管理后台申请的密钥。

如果只需要集成某一个分享平台，只需要将其他平台的代码删除即可。

在 AndroidManifest.xml 中添加以下权限：

<uses-permission android:name="android.permission.INTERNET" />
<uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />

使用

在需要使用分享的组件中引入 react-native-run-umshare：
```
import UMShare from 'react-native-run-umshare';
```
在需要进行分享的地方（如按钮点击事件中）调用以下代码：
```
UMShare.share({
    type: 'image',
    filePath: 'file://' + this.state.image,
    title: '分享的标题',
    description: '分享的描述',
    platform: 'wechat'
});
```
上述代码表示将当前页面的图片分享到微信。其中 filePath 和 platform 的值要根据实际情况来设置。

总结

本文介绍了如何使用 react-native-run-umshare 这个 npm 包来集成友盟分享功能，并给出了 iOS 和 Android 平台下的配置方法，并附上了代码示例，希望对初学者有所帮助。

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