资讯 News React Native 原生模块接入文档

概述

本文档描述了 React Native 开发者如何集成 News 原生模块(后面简称为模块),通过集成模块为 App 引入完备的信息流服务。

如果需要在信息流和资讯正文中展示广告,则需集成 广告模块。本文档默认需要展示广告,展示广告可以创造收益。

术语介绍

AppId:应用 id,18位 hex 字符串。【注意】调试时请使用测试 appId:ba0063bfbc1a5ad878;外发版本请替换成正式 appId,否则不会产生收益。

UserId:用户 id,接入方定义的用户唯一标识,传入时可以哈希脱敏,主要用于排查问题。

模块集成

$ npm install react-native-mobnews --save

或者

$ yarn add react-native-mobnews --save

react native 版本号为 0.60 以下的需要手动 link

$ react-native link react-native-mobnews

【iOS】需在 Podfile 文件顶部添加 CocoaPods 源:

source 'https://gitee.com/mobad/Specs.git'
source 'https://github.com/CocoaPods/Specs.git'

然后命令行运行:

$ pod install --repo-update

SDK 初始化

开发者需要在 App 入口处调用以下代码进行初始化:

import AdSdk from 'react-native-mobad';
import NewsSdk from 'react-native-mobnews';

// 初始化 AdSdk,资讯中可以展现广告
AdSdk.init({
    appId: APP_ID,
    userId: userId, // 未登录可不设置 userId,登录时再设置
    debug: false, // 是否调试模式,默认 false
});

NewsSdk.init({
    appId: APP_ID,
    userId: userId, // 未登录可不设置 userId,登录时再设置
    debug: false, // 是否调试模式,默认 false
});

登录时请设置 userId:

AdSdk.setUserId(userId);
NewsSdk.setUserId(userId);

退出登录请重置 userId:

AdSdk.setUserId(null);
NewsSdk.setUserId(null);

信息流接入

资讯信息流组件使用如下:

<NewsView style={{width: '100%', height: '100%'}} />