React Native GroMore

Appearance

安装与配置 ​

首次安装需要生成访问令牌，并根据 文档 部分配置项目。

生成令牌 ​

登录账号后在 个人信息与配置 -> 设置 -> 应用 -> 管理 Access Token 添加一个具有 package 至少读取权限的 token。

step1

step2

step3

step4

配置软件包 ​

第一步 ​

在开发设备的终端上执行以下命令配置权限：

{token} 替换为您的个人访问令牌，即上文中生成的令牌。

bash
npm config set "@zmide:registry=https://git.zmide.com/api/packages/rn/npm/"
npm config set -- '//git.zmide.com/api/packages/rn/npm/:_authToken' "{token}"

第二步 ​

在项目根目录创建 .npmrc 添加以下安装源。

yml
@zmide:registry=https://git.zmide.com/api/packages/rn/npm/

第三步 ​

通过 npm 或 yarn 安装 @zmide/react-native-gromore。

bash
npm install @zmide/react-native-gromore

# or

yarn add @zmide/react-native-gromore

Android 部分配置 ​

由于穿山甲新版本的 sdk 没有发布 maven 包，我们自己维护了一套 maven 远程依赖下载。

编辑 android/app/build.gradle 文件，添加 repositories 部分 maven 源地址 https://git.zmide.com/api/packages/android/maven：

groovy
……

android {
    ndkVersion rootProject.ext.ndkVersion
    buildToolsVersion rootProject.ext.buildToolsVersion
    compileSdk rootProject.ext.compileSdkVersion
    ……
}

repositories {
  maven {
    url "https://git.zmide.com/api/packages/android/maven"
  }
}

dependencies {
    // The version of react-native is set by the React Native Gradle Plugin
    implementation("com.facebook.react:react-android")

    if (hermesEnabled.toBoolean()) {
        implementation("com.facebook.react:hermes-android")
    } else {
        implementation jscFlavor
    }
}
……

TIP

至此安装完成，若程序运行出现闪退情况可参考问题尝试解决。

配置代码位 ​

若未创建代码位，需要完成以下前置工作：

  • 注册账号：在穿山甲官网注册并登录账号。
  • 完成资质认证和签约：在开发者平台根据引导完成资质认证和合同签署。
  • 创建应用 和 代码位：在平台上创建应用并获取 App Key，然后创建代码位并配置广告参数。

    TIP

    由于本产品开发基于 GroMore SDK，因此创建代码位时需选择支持 GroMore: select

    也可在 流量变现 -> GroMore -> 应用管理 页面创建广告位。 :::

在项目中创建 src/codes.ts 文件，如下所示：

ts
export default {
  appid: '',
  splash_code: '',
  banner_code: '',
  feed_code: '',
  rewarded_video_code: '',
  fullscreen_video_code: '',
  fullscreen_video_code_full: '',
  fullscreen_video_code_half: '',
};

查看并选择平台中已获取的广告位 ID，并在上述文件中填写对应的广告位 ID：

ID 名称描述
appid应用 ID
splash_code开屏广告
banner_code横幅广告
feed_code信息流广告
rewarded_video_code激励视频广告
fullscreen_video_code全屏/插屏视频广告
fullscreen_video_code_full全屏视频广告
fullscreen_video_code_half插屏视频广告