React-native integrates the latest UmU statistics SDK

This document is applicable to React-Native versions 0.60 or higher. The following may differ. The React-Native version was 0.63 when I integrated

I’m writing this post because umong’s React-Native tutorial is pretty old. Open the official website of Friendly Alliance.

First, integrate android. Open the Android integration url: Android Integration.

Choose automatic integration, manual is not considered, if you need to leave a message.

Maven Automatic Integration for Android integration (recommended)

Import the latest version of the component-based statistics SDK by adding maven online dependencies in the Android Studio project build.gradle configuration script.

Maven dependency Configuration

1. Add the new Maven repository address of the [Friendly +] SDK to the buildScript and AllProjects sections of the project build.gradle configuration script.

buildscript {
    repositories {
        google()
        jcenter()
        maven { url 'https://dl.bintray.com/umsdk/release'}}dependencies {
        classpath 'com. Android. Tools. Build: gradle: 3.4.0'

        // NOTE: Do not place your application dependencies here; they belong
        // in the individual module build.gradle files}}allprojects {
    repositories {
        google()
        jcenter()
        // Add the following line
        maven { url 'https://dl.bintray.com/umsdk/release'}}}Copy the code

2. Add the dependencies of the SDK library to the dependencies section of the build.gradle configuration script of the project App.

    // The following SDKS are introduced on demand according to whether the host App uses relevant services.
    // OAID is currently the mainstream Android Q device identifier in the domestic market, and can be selected as required.
    // Umeng statistics SDK
    implementation  'com.umeng.umsdk:common:9.x.x' // (Mandatory) Version number
    implementation  'com.umeng.umsdk:game:9.x.x+G' // Game statistics SDK dependency (optional)
    implementation  'com. Umeng. Umsdk: asms: 1.1.3' // ASMS package dependencies (Required)
    implementation 'com. Umeng. Umsdk: crash: 0.0 x' // Native crash package dependencies (mandatory)

    implementation  'com. Umeng. Umsdk: oaid_lenovo: 1.0.0' // (optional)
    implementation  'com. Umeng. Umsdk: oaid_mi: 1.0.0' // (optional)
    implementation  'com. Umeng. Umsdk: oaid_oppo: 1.0.4' // (optional)
    implementation  'com. Umeng. Umsdk: oaid_vivo: 1.0.0.1' // (optional)
Copy the code

Pay special attention to the following sentence:

In the Android Studio 3.1 or later development environment, specifying “latest.integration” may cause the download library to timeout. In this case, you need to specify the version.

Note: OAID is currently the mainstream Android Q device identifier in the domestic market. At present, mainstream manufacturers (Huawei, OPPO, Vivo, Lenovo, Xiaomi) have supported the acquisition of the logo in the new version of the system, which is authoritative. By default, Huawei does not need to add additional JAR packages.

Special reminder: If you do not add OAID library into the integration of U-App, it may reduce the indicators of u-App for Android Q system, such as addition, startup, activity and retention. Therefore, you are advised to access OAID library.

3. Open the React-Native SDK download

Don’t worry about the top two terms. The versions inside are very low, so we just need to open themReactNativeFolder.Copy the android section below, then open your project and put it inYour project > Android > App > SRC > Main > JavaFor example, you can create a separate package to store the files above, as in:Your project is > Android >app> SRC >main> Java >com>umAnd I can talk to youMainActivity.javaNote the package name when you copy it in. The tutorials I’ve seen usually don’t say this because it’s not necessary for native Android development, but because it’s react-native, some people don’t know Android, or even Java. Therefore, I think writing a tutorial related to React-Native should explain as much as possible, even if it is very common.

If there is an error in the imported file, delete the above, using the Android Studio automatic import method, automatic import. This is mainly the following ios error.

Remember where you were, like you wereYour project is > Android >app> SRC >main> Java >com>umThis one.

4. Open theMainApplication.javaAdd the following code to the onCreate function:

RNUMConfigure.init(this."Your appkey"."Channel name, default: Umeng", UMConfigure.DEVICE_TYPE_PHONE,"If push is integrated, fill in secret provided in push, otherwise empty");
Copy the code

And the following code:Open theMainActivity.javaFile, add the following code:

@Override
protected void onResume(a) {
  super.onResume();
  MobclickAgent.onResume(this);
}

@Override
protected void onPause(a) {
  super.onPause();
  MobclickAgent.onPause(this);
}
Copy the code

This code is the life cycle function in Android.

This completes the Android configuration.

Pod integration for ios integration

1. Open your Podfile and add the following code:

Pod 'UMCCommon' pod 'UMCCommonLogCopy the code

Then go to the ios folder and execute “Pod Install” to indicate that the library is ready.

2. Copy the file above as well:

After you copy it, add it to your project. You can add it to the same directory as your main.m, and you can also add more paths.

Open theUMAnalyticsModule.mThe file, there will be an error, the error said:Don’t worry, don’t wonder if the package is not complete, in fact, the current statistics are all integrated into the common library. But this file is very old, it is not introduced correctly, it should be:#import <UMCommon/MobClick.h>That will do.

3. Open the fileAppDelegate.mFile. Based on my tests and inquiries, I found the following- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptionsThis function, add the following function to it.

RNUMConfigure initWithAppkey:@" your iosapi" channel:@" this is the default: App Store"];Copy the code

The following is the JS side of the interface

As you can see from the download file, there is a JS that is official, but official is not reliable, because android and ios have some interface names that are different.As can be seen from this figure, this JS file does not arrange the native exposed interfaces at all, so we need to see the native exposed interfaces when using them. For convenience, we can write all interfaces in here instead of using the JS file provided on the official website. There is nothing special about how this file is used, just like any other component you write.

Later I will record more work experience, if there is wrong, hope god supplement, if there is not understand, please leave a message.