ReactNative搭建App应用角标2018-09-14

采用推送时，经常需要在App上显示消息数量，但是Android并没有原生的接口可以供调用。而且各大厂商的实现也是五花八门。尤其是在Rn开发中也没有现成的组件。本篇详细介绍如何搭建角标。采用第三方Android组件。

组件地址# https://github.com/leolin310148/ShortcutBadger#samsung
直接下载下来即可。

1导入组件

将下载下来的组件copy到android项目中。

image.png

image.png

2.桥接应用组件，需要如下配置

1.项目中的android文件夹中的settings.gradle中加入下面

include ':ShortcutBadger'

image.png

2.android文件夹中的build.gradle中加入

subprojects {
  buildscript {
    repositories {
        jcenter()
        mavenCentral()
    }
    dependencies {
        classpath 'com.android.tools.build:gradle:2.2.3'
    }
  }
  repositories {
      jcenter()
      mavenCentral()
    }
}

image.png

3.android下的app下的build.gradle中找到dependencies,在这个配置里加入

 compile project(':ShortcutBadger')

image.png

4.解决启动报错的问题，junit报错。

这样搭建完，我启动会报错。大致是无法下载junit。
加入这个配置即可

    allprojects {
      repositories {
        mavenLocal()
        jcenter()
        maven {
        // All of React Native (JS, Obj-C sources, Android       binaries) is installed from npm
        url "$rootDir/../node_modules/react-native/android"
      }
       // ADD THIS
          maven { url 'https://maven.google.com' }

          maven { url 'http://repo1.maven.org/maven2' }
          // ADD THIS
          maven { url "https://jitpack.io" }
    }
}

最主要的就是这个配置

maven { url 'http://repo1.maven.org/maven2' }

image.png

5.增加ShortcutBadger配置

    allprojects {
repositories {
    mavenLocal()
    jcenter()
    maven {
        // All of React Native (JS, Obj-C sources, Android binaries) is installed from npm
        url "$rootDir/../node_modules/react-native/android"
    }
     // ADD THIS
      maven { url 'https://maven.google.com' }

      maven { url 'http://repo1.maven.org/maven2' }
      // ADD THIS
      maven { url "https://jitpack.io" }
}

}

image.png

这样基础的配置就都搞定了。

3.添加原生代码

以下代码，我会连同包名一起copy，达到你copy就能使用，很傻瓜。

1.添加BadgeModule.java类

package com.emsapp; **切记改成你自己的包名**
import com.facebook.react.bridge.ReactApplicationContext;
import   com.facebook.react.bridge.ReactContextBaseJavaModule;
import com.facebook.react.bridge.ReactMethod;
import android.widget.Toast;
import java.util.ArrayList;
import java.util.Collections;
import java.util.List;
import me.leolin.shortcutbadger.*;

public class BadgeModule extends ReactContextBaseJavaModule {

public BadgeModule(ReactApplicationContext reactContext) {
    super(reactContext);
}

/**
 * 这个返回的字符串是我们js端调用时会用到的
 */
@Override
public String getName() {
    return "Badge";
}

/**
*这个方法是我们js端调用的方法，其中的参数可以从js端传过来  如这里我们js端可以类似  Badge.showBadge(2)来调用这个方法
*/
@ReactMethod
public void showBadge(int badgeNum) {
    boolean success = ShortcutBadger.applyCount(getCurrentActivity(), badgeNum);
    Toast.makeText(getCurrentActivity(), "Set count=" + badgeNum + ", success=" + success, Toast.LENGTH_SHORT).show();
    System.out.println(success);
}}

2.添加BadgePackage.java类

  package com.emsapp; **切记改成你自己的包名**
  import com.facebook.react.ReactPackage;
  import com.facebook.react.bridge.ReactApplicationContext;
  import com.facebook.react.bridge.NativeModule;
  import java.util.ArrayList;
  import java.util.Collections;
  import java.util.List;
  import com.facebook.react.uimanager.ViewManager;
  public class BadgePackage implements ReactPackage {

@Override
public List createViewManagers(ReactApplicationContext reactContext) {
    return Collections.emptyList();
}

@Override
public List createNativeModules(
        ReactApplicationContext reactContext) {
    List modules = new ArrayList<>();
    // 这里就是自己写的module
    modules.add(new BadgeModule(reactContext));

    return modules;
}}

3配置MainApplication.java类

// 注意这里，是我们的package
new BadgePackage(),

image.png

4EeactNative内使用

1.导入组件

import {NativeModules} from 'react-native';

image.png

2.使用

const badge = NativeModules.Badge;
badge.showBadge(5);

总结，在使用第三方组件时候。并不能确保所有的android手机都能显示角标。例如我的vivoX23就不可以，华为没有问题。这个github上已经列出了常用的手机型号。

开始我绕的坑，以为是搭建不成功，调试了一圈原生组件，发现这么搭建是没有问题的。文章我自己已经罗列的足够细致，有问题可以给我留言，或者联系我的QQ337241905。

参考的文章之一：原文连接https://blog.csdn.net/lqx_sunhan/article/details/80377482#comments