React Native 如何实现拉起App
概述
Xinstall 支持 React Native 应用接入,你可以使用 NPM 包管理器及 React Native 配套工具进行快速集成。 对应的 NPM 包名为:xinstall_react_native,你可以在 这里 找到 NPM 中对应的包页面。
xinstall_react_native 模块封装了 Xinstall 官方 SDK,是集智能传参、快速安装、一键拉起、客户来源统计等功能,帮您提高拉新转化率、安装率和多元化精确统计渠道效果的产品。为用户提供点击、安装、注册、留存、活跃等精准统计报表,并可实时排重,杜绝渠道流量猫腻,大大降低运营成本。 具体详细介绍可前往 Xinstall 官网 进行查看。
如何接入
下面我们介绍如何进行React Native接入:
【重要说明】:从 v1.5.0 版本(含)开始,调用 Xinstall 模块的任意方法前,必须先调用一次初始化方法(init 或者 initWithAd),否则将导致其他方法无法正常调用。
从 v1.5.0 以下升级到 v1.5.0 以上版本后,需要自行修改代码调用初始化方法,Xinstall 模块无法在升级后自动兼容。
1、在 React Native 工程中安装模块
在需要集成的 React Native 工程根目录下,执行:
npm install xinstall-react-native --save
如果该工程使用的 React Native 版本 < 0.60.0 那么需要执行 link 命令:
npx react-native link xinstall-react-native
接下来需要针对 iOS 端进行 pod 安装 xinstall 的包:
// 在 React Native 工程根目录下依次执行
cd ios
pod install
cd ..
【注意】如果 pod install 失败,或者您的 iOS 工程是通过 pod 集成 React Native,那么可以按照如下步骤进行 iOS 端集成:
-
在 ios/Podfile 文件中添加本地 path:
pod 'xinstall-react-native', :path => '../node_modules/xinstall-react-native'
-
然后在 ios/ 目录下执行:
pod install
2、创建 Xinstall 应用
进入 Xinstall 官网 注册账号,并在控制台中创建一个对应的应用,应用名字可以任意填写:
注意记录 Xinstall 中新创建应用的 appkey(后续配置需要用到):
接入过程中如有任何疑问或者困难,可以随时联系 Xinstall 官方客服 在线解决。
3、初始化配置
3.1、获取必要参数
- appKey:从 Xinstall 平台获取的 AppKey,在上一步骤中可以获取到
- scheme:详细获取位置:Xinstall 应用控制台-> Android下载配置 中获取
3.2、自动初始化 xinstall-react-native 模块
进入 React Native 工程根目录,执行:
npm run initxinstall <appKey> <scheme>
【注意】:appKey 和 scheme 分别替换成 3.1 中具体的值(两边的尖括号不需要,去掉即可)
如果执行这步时,终端中如果因为报错而导致自动初始化失败,那么可以参考这篇文章进行:手动初始化 xinstall-react-native 模块
3.3、Universal links 相关配置(针对 iOS)
Xinstall 通过 Universal links(iOS ≥ 9)技术,在 App 已安装的情况下,从各种浏览器(包括微信、QQ、新浪微博、钉钉等主流社交软件的内置浏览器)拉起 App 并传递动态参数,避免重复安装。
开启 Associated Domains 服务
对于 iOS,为确保能正常使用一键拉起功能,AppID 必须开启 Associated Domains 功能,请到苹果开发者网站,选择 “Certificate, Identifiers & Profiles”,选择 iOS 对应的 AppID,开启 Associated Domains:
为刚才开发关联域名功能的 App ID 创建新的(或更新现有的)描述文件,下载并导入到 Xcode 中(通过 Xcode 自动生成的描述文件,可跳过这一步):
配置 Universal links 关联域名
在 Xcode 中配置 Xinstall 为当前应用生成的关联域名(Associated Domains):applinks:xxxx.xinstall.top 和 applinks:xxxx.xinstall.net
具体的关联域名可在 Xinstall管理后台 - 对应的应用控制台 - iOS下载配置 页面中找到
4、导出包上传 Xinstall
代码集成完毕后,需要通过 React Native 导出 iOS 和 Android 离线包(.ipa 和 .apk),并上传 Xinstall 控制台里对应的 App:
示例图片(iOS 端):
示例图片(Android 端):
上传完包后,需要进入「iOS下载配置」和「Android下载配置」中选择下载的包的版本
示例图片(iOS 端):
示例图片(Android 端):
注意:每次上传完新的 ipa 或者 apk 包后,均需要进入「iOS下载配置」和「Android下载配置」中重新选择下载的包的版本
三、如何使用
1、快速下载和一键拉起
如果只需要快速下载功能和一键拉起,无需其它功能(携带参数安装、渠道统计),完成初始化配置即可。其他影响因素如下图
2、初始化 Xinstall 模块
注意:从 v1.5.0 版本开始,在调用 Xinstall 插件的任意方法之前,必须调用一次初始化方法,只需要调用一次即可,不需要反复调用。
v1.5.0 之前的版本会在启动时自动初始化,无需调用,也无法调用。
init
初始化方法。在调用 Xinstall 插件其他方法之前必须调用一次该方法,否则其他方法均无法正常执行。
示例代码
init()
入参说明:无需主动传入参数
回调说明:无需传入回调函数
调用示例
// 在文件头部导入 xinstall 模块
import xinstall from 'xinstall-react-native'
// 在代码中调用 init 方法初始化
xinstall.init();
可用性
Android系统,iOS系统
可提供的 1.5.0 及更高版本
更高级的 携带参数安装/唤起、高级数据统计、场景定制统计、广告平台渠道功能、苹果搜索广告(ASA)渠道功能可以看集成文档
三、导出apk/ipa包并上传
参考官网文档
iOS集成-导出ipa包并上传
Android-集成
四、如何测试
参考官方文档 测试集成效果