介绍
nsky-ad 是一个基于 React 的广告组件库，提供了多种各具特色的广告组件。nsky-ad 使用方便，且易于定制，可以满足各种广告展示的需求。
安装
使用 npm 安装：
$ npm install nsky-ad --save
基本使用
首先，在要使用 nsky-ad 的组件中导入所需的广告组件：
import { BannerAd } from 'nsky-ad';在组件中使用广告组件：
function MyComponent() {
return (
<div>
<BannerAd adId="123456" />
</div>
);
}其中，adId 是你在广告提供商那里的广告 ID，使用时替换成自己的广告 ID 即可展示广告。
广告类型
nsky-ad 提供了多种广告类型，下面是一些常用的广告类型的使用方法。
BannerAd
BannerAd 是最常用的广告类型，一般位于网站页面的顶部或底部。
-- -------------------- ---- -------
------ - -------- - ---- ----------
-------- ------------- -
------ -
-----
--------- ------------- --
------
--
-InterstitialAd
InterstitialAd 是全屏广告，一般会在用户操作页面时出现，具有非常好的点击率。
-- -------------------- ---- -------
------ - -------------- - ---- ----------
-------- ------------- -
------ -
-----
--------------- ------------- --
------
--
-NativeAd
NativeAd 是原生广告，可以自定义样式来适应不同的页面风格。
-- -------------------- ---- -------
------ - -------- - ---- ----------
-------- ------------- -
------ -
-----
--------- ------------- --
------
--
-RewardAd
RewardAd 是激励广告，一般用于游戏应用中，用户可以通过观看广告来获得奖励。
-- -------------------- ---- -------
------ - -------- - ---- ----------
-------- ------------- -
------ -
-----
--------- ------------- --
------
--
-参数说明
除了 adId 参数外，nsky-ad 还提供了一些其他的可选参数，以方便你对广告进行更细致的调整。
BannerAd
| 参数名 | 类型 | 说明 |
|---|---|---|
| adId | string | 广告 ID |
| width | number | 广告宽度 |
| height | number | 广告高度 |
| onAdLoaded | function | 广告加载成功时的回调函数 |
| onAdFailedToLoad | function | 广告加载失败时的回调函数 |
| onAdClicked | function | 广告被点击时的回调函数 |
| onAdClosed | function | 广告被关闭时的回调函数 |
InterstitialAd
| 参数名 | 类型 | 说明 |
|---|---|---|
| adId | string | 广告 ID |
| onAdLoaded | function | 广告加载成功时的回调函数 |
| onAdFailedToLoad | function | 广告加载失败时的回调函数 |
| onAdClicked | function | 广告被点击时的回调函数 |
| onAdClosed | function | 广告被关闭时的回调函数 |
NativeAd
| 参数名 | 类型 | 说明 |
|---|---|---|
| adId | string | 广告 ID |
| style | object | 自定义样式 |
| onAdLoaded | function | 广告加载成功时的回调函数 |
| onAdFailedToLoad | function | 广告加载失败时的回调函数 |
| onAdClicked | function | 广告被点击时的回调函数 |
| onAdClosed | function | 广告被关闭时的回调函数 |
RewardAd
| 参数名 | 类型 | 说明 |
|---|---|---|
| adId | string | 广告 ID |
| onAdLoaded | function | 广告加载成功时的回调函数 |
| onAdFailedToLoad | function | 广告加载失败时的回调函数 |
| onAdRewarded | function | 广告被观看完毕时的回调函数 |
| onAdClosed | function | 广告被关闭时的回调函数 |
示例代码
下面是一个完整的 nsky-ad 使用示例：
-- -------------------- ---- -------
------ ----- ---- --------
------ - --------- --------------- --------- -------- - ---- ----------
-------- ------------- -
----- -------------------- - -- -- -
------------------- -- ----------
--
----- -------------------------- - -- -- -
------------------------- -- ----------
--
----- -------------------------- - -- -- -
------------------- -- ------ -- --------
--
----- ---------------------- - -- -- -
------------------- -- ------------
--
------ -
-----
------ --------
---------
-------------
-----------
-----------
---------------------------------
--
--------------- ----------- --------------------------------------- --
--------- ------------ -------- ---------------- ------ -- --------------------------------------------- --
--------- ------------ ------------------------------------- --
------
--
-结语
通过本文，你已经了解了 nsky-ad 的基本使用方法和参数说明，希望这对你在开发过程中使用广告组件有所帮助。如果你遇到了任何问题，欢迎在评论区提出，我们会尽快回复。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60066f913d1de16d83a66b15