react-native穿山甲广告android

1 sdk包导入

将穿山甲开发者平台 提供的open_ad_sdk.aar复制到Application Module/libs文件夹(没有的话须手动创建), 并将以下代码添加到您app的build.gradle中：

repositories {
   flatDir {
       dirs 'libs'
   }
}
depedencies {
   compile(name: 'open_ad_sdk', ext: ‘aar')
}

这里需要注意的一点：
2021-01-13 穿山甲sdk更新中，为了适配Android R ,Gradle插件升级4.1.; 但是react-native v0.63. 使用的 gradle 版本是3.5.3，因此需要更改 gradle版本
在android/build.gradle 中：

 dependencies {
        classpath("com.android.tools.build:gradle:4.1.0")  //默认3.5.3
    }

在android/gradle/wrapper/gradle-wrapper.properties 中：

distributionUrl=https\://services.gradle.org/distributions/gradle-6.5-all.zip  //默认6.2

2 AndroidManifest配置

在 android\app\src\main\AndroidManifest.xml 中做如下2项配置

添加权限

<!--必要权限-->
<uses-permission android:name="android.permission.INTERNET" />

<!-- 如果视频广告使用textureView播放，请务必添加，否则黑屏 -->
<uses-permission android:name="android.permission.WAKE_LOCK" />  //我个人在没有添加这条权限后出现了黑屏

也可以在调用广告的时候再轻轻权限，提升用户的交互体验

//TTAdManager接口中的方法，context可以是Activity或Application
void requestPermissionIfNecessary(Context context);

provider配置

android7.0以上需要将下列添加到AndroidManifest

<provider
    android:name="com.bytedance.sdk.openadsdk.TTFileProvider"
    android:authorities="${applicationId}.TTFileProvider"
    android:exported="false"
    android:grantUriPermissions="true">
   <meta-data
        android:name="android.support.FILE_PROVIDER_PATHS"
        android:resource="@xml/file_paths" />
</provider>
<provider
android:name="com.bytedance.sdk.openadsdk.multipro.TTMultiProvider"   android:authorities="${applicationId}.TTMultiProvider"   android:exported="false"  data-tomark-pass />

还需要在 res/xml下新建一个xml文件file_paths

<?xml version="1.0" encoding="utf-8"?>
<paths xmlns:android="http://schemas.android.com/apk/res/android">
   <!--为了适配所有路径可以设置 path = "." -->
   <external-path name="tt_external_root" path="." />
   <external-path name="tt_external_download" path="Download" />
   <external-files-path name="tt_external_files_download" path="Download" />
   <files-path name="tt_internal_file_download" path="Download" />
   <cache-path name="tt_internal_cache_download" path="Download" />
</paths>

代码混淆和 白名单配置（官网下载的sdk包中有whiteList.txt）

3 sdk初始化

在 app/main/java/com/你的包 下面添加文件夹toutiaoad

1新建 TTAdModule.java

class TTAdModule extends ReactContextBaseJavaModule {
    public static final String REACT_CLASS = "TTAd";
    public static final String EVENT_AD_SHOWED = "TTAdshow";
    public static final String EVENT_AD_VIDEO_BAR_CLICK = "TTAdclick";
    public static final String EVENT_AD_VIDEO_CLOSE = "TTAdclose";
    public static final String EVENT_AD_VIDEO_COMPLETE = "TTAdcomplete";
    public static final String EVENT_AD_SKIPPED_VIDEO = "TTAdSkipped";
    public static final String EVENT_AD_FAILED_TO_LOAD = "TTAdFailedToLoad";
    private TTFullScreenVideoAd mttFullVideoAd;
    private TTRewardVideoAd mttRewardVideoAd;
    public TTAdModule (@Nonnull ReactApplicationContext reactContext) {
        super(reactContext);
    }
    @Nonnull
    @Override
    public String getName() {
        return REACT_CLASS;
    }
    @ReactMethod
    public void showFullScreenVideoAd(String codeId) {
        try {
            initFullScreenVideoAd(codeId);
        } catch (Exception e) {
            Log.d("...ScreenVideoModule", e.getMessage());
        }
    }
    private void showAd() {
        getCurrentActivity().runOnUiThread(new Runnable() {
            @Override
            public void run() {
                if (mttFullVideoAd != null) {
                    mttFullVideoAd.showFullScreenVideoAd(getCurrentActivity(), TTAdConstant.RitScenes.GAME_GIFT_BONUS, null);
                }
            }
        });
    }
    private void sendEvent(String eventName, @Nullable WritableMap params) {
      getReactApplicationContext().getJSModule(DeviceEventManagerModule.RCTDeviceEventEmitter.class).emit(eventName, params);
    }
        @ReactMethod
        // 全屏广告
    private void initFullScreenVideoAd(String codeId) {
        //step1:初始化sdk
        TTAdManager ttAdManager = TTAdManagerHolder.get();
        //step2:(可选，强烈建议在合适的时机调用):申请部分权限，如read_phone_state,防止获取不了imei时候，下载类广告没有填充的问题。
        TTAdManagerHolder.get().requestPermissionIfNecessary((MainActivity) getCurrentActivity());
        //step3:创建TTAdNative对象,用于调用广告请求接口
        TTAdNative mTTAdNative = ttAdManager.createAdNative((MainActivity) getCurrentActivity());
        //step4:创建广告请求参数AdSlot,具体参数含义参考文档
        AdSlot adSlot = new AdSlot.Builder()
                .setCodeId(codeId)
                .setSupportDeepLink(true)
                .setImageAcceptedSize(1080, 1920)
                .setOrientation(TTAdConstant.VERTICAL)//必填参数，期望视频的播放方向：TTAdConstant.HORIZONTAL 或 TTAdConstant.VERTICAL
                .build();
        //step5:请求广告
        mTTAdNative.loadFullScreenVideoAd(adSlot, new TTAdNative.FullScreenVideoAdListener() {
            @Override
            public void onError(int code, String message) {
//                TToast.show(getCurrentActivity(), message + "message");
                WritableMap error = Arguments.createMap();
                error.putInt("code", code);
                error.putString("message", message);
                sendEvent(EVENT_AD_FAILED_TO_LOAD, error);
            }
            @Override
            public void onFullScreenVideoAdLoad(TTFullScreenVideoAd ad) {
                mttFullVideoAd = ad;
                mttFullVideoAd.setFullScreenVideoAdInteractionListener(new TTFullScreenVideoAd.FullScreenVideoAdInteractionListener() {

                    @Override
                    public void onAdShow() {
                        sendEvent(EVENT_AD_SHOWED, null);
                    }
                    @Override
                    public void onAdVideoBarClick() {
                        sendEvent(EVENT_AD_VIDEO_BAR_CLICK, null);
                    }

                    @Override
                    public void onAdClose() {
                        sendEvent(EVENT_AD_VIDEO_CLOSE,null);
                    }
                    @Override
                    public void onVideoComplete() {
                        sendEvent(EVENT_AD_VIDEO_COMPLETE, null);

                    }
                    @Override
                    public void onSkippedVideo() {
                        sendEvent(EVENT_AD_SKIPPED_VIDEO, null);
                    }
                });
                showAd();
            }
            @Override
            public void onFullScreenVideoCached() {
            }
        });
    }
}

2新建TTAdManagerHolder.java

/**
 * 可以用一个单例来保存TTAdManager实例，在需要初始化sdk的时候调用
 */
public class TTAdManagerHolder {

    private static boolean sInit;

    public static TTAdManager get() {
        if (!sInit) {
            throw new RuntimeException("TTAdSdk is not init, please check.");
        }
        return TTAdSdk.getAdManager();
    }

    public static void init(Context context) {
        doInit(context);
    }

    //step1:接入网盟广告sdk的初始化操作，详情见接入文档和穿山甲平台说明
    private static void doInit(Context context) {
        if (!sInit) {
            TTAdSdk.init(context, buildConfig(context));
            sInit = true;
        }
    }
    private static TTAdConfig buildConfig(Context context) {
        return new TTAdConfig.Builder()
                .appId(你的.APP_ID)
                .useTextureView(true) //使用TextureView控件播放视频,默认为SurfaceView,当有SurfaceView冲突的场景，可以使用TextureView
                .appName(你的.APP_NAME)
                .titleBarTheme(TTAdConstant.TITLE_BAR_THEME_DARK)
                .allowShowNotify(true) //是否允许sdk展示通知栏提示
                .allowShowPageWhenScreenLock(true) //是否在锁屏场景支持展示广告落地页
                .debug(true) //测试阶段打开，可以通过日志排查问题，上线时去除该调用
                .directDownloadNetworkType(TTAdConstant.NETWORK_STATE_WIFI, TTAdConstant.NETWORK_STATE_3G) //允许直接下载的网络状态集合
                .supportMultiProcess(false)//是否支持多进程
                //.httpStack(new MyOkStack3())//自定义网络库，demo中给出了okhttp3版本的样例，其余请自行开发或者咨询工作人员。
                .build();
    }
}

3新建TTAdPackage.java

public class TTAdPackage implements ReactPackage {
  @Override
  public List<ViewManager> createViewManagers(ReactApplicationContext reactContext) {
    return Collections.emptyList();
  }
  @Override
  public List<NativeModule> createNativeModules(
          ReactApplicationContext reactContext) {
    List<NativeModule> modules = new ArrayList<>();
    modules.add(new TTAdModule(reactContext));
    return modules;
  }
}

4注册模块

在android/app/src/main/java/com/项目名/MainApplication.java 中注册TTAdPackage；

@Override
        protected List<ReactPackage> getPackages() {
          @SuppressWarnings("UnnecessaryLocalVariable")
          List<ReactPackage> packages = new PackageList(this).getPackages();
           packages.add(new TTAdPackage());
          return packages;
        }

还需要在onCreate 方法中初始化 TTAdManager

  @Override
  public void onCreate() {
    super.onCreate();
     TTAdManagerHolder.init(this);
    SoLoader.init(this, /* native exopackage */ false);
    initializeFlipper(this, getReactNativeHost().getReactInstanceManager());
  }

##4 react-native 中调用模块

import {NativeEventEmitter, NativeModules} from 'react-native';
const TTAd = NativeModules.TTAd;
const eventEmitter = new NativeEventEmitter(TTAd);
eventEmitter.addListener('TTAdshow', res=>{
  console.log('TTAdshow')
})
eventEmitter.addListener('TTAdclick', res=>{
  console.log('TTAdclick')
})
eventEmitter.addListener('TTAdSkipped', res=>{
  console.log('TTAdSkipped')
})
eventEmitter.addListener('TTAdclose', res=>{
  console.log('TTAdclose')
})
eventEmitter.addListener('TTAdFailedToLoad', res=>{
  console.log('TTAdFailedToLoad')
  console.log(res)
})
eventEmitter.addListener('TTAdcomplete', res=>{
  console.log('TTAdcomplete')
})

 NativeModules.TTAd.initFullScreenVideoAd('全屏广告id')