..最近由於專案需求，需要在app中實現一個角標的功能，搜尋後得知在安卓中，原生是不支援角標BadgeNumber的,ios原生的話是支援的，不過目前沒有接觸ios相關的東西，也就不去研究了，下面主要是在安卓上實現的。

目前所支援的機型也是說清楚了的，所以並不是所有機型都支援的。

結合react-native實現

因為那個庫是安卓的庫，我這個專案是rn寫的，所以我得把他們結合起來，主要方法呢主要是參照官網中的rn與原始模組通訊，接下來寫一下步驟:

1.在rn專案中引入庫

上面的github中的東西下載完成後，我試了一下，若是使用Jar包的方式引用，怎麼都不行，大家可以試一試，如果ok的，可以給我留言，我們一起探討，我的做法是把整個工程資料夾搬到我的rn專案下的android中。
專案結構:

完了之後我們有幾處地方需要修改的:

1.專案中的android資料夾中的settings.gradle中加入下面

include ':ShortcutBadger'

2.還是android資料夾中的build.gradle中加入

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

        }
    }
    repositories {
        jcenter()
        mavenCentral()
    }

}

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

compile project(':ShortcutBadger')

這樣的話就算是把這個庫引入我們的專案中了。

2.寫安卓原生程式碼,實現與rn的通訊

1.寫一個類繼承ReactContextBaseJavaModule

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.寫一個類實現ReactPackage註冊這個module

public class BadgePackage implements ReactPackage {

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

    @Override
    public List<NativeModule> createNativeModules(
            ReactApplicationContext reactContext) {
        List<NativeModule> modules = new ArrayList<>();
        // 這裡就是自己寫的module
        modules.add(new BadgeModule(reactContext));

        return modules;
    }
}

3.在MainApplication中新增package

public class MainApplication extends Application implements ReactApplication {

  // private final ReactNativeHost mReactNativeHost = new ReactNativeHost(this) {
  private ReactNativeHost mReactNativeHost = new ReactNativeHost(this) {
    @Override
    public boolean getUseDeveloperSupport() {
      return BuildConfig.DEBUG;
    }

    @Override
    protected List<ReactPackage> getPackages() {
      return Arrays.<ReactPackage>asList(
          new MainReactPackage(),
            new RCTCapturePackage(),
            new ImagePickerPackage(),
             // 注意這裡，是我們的package
              new BadgePackage()
      );
    }

    @Override
    protected String getJSMainModuleName() {
      return "index";
    }
  };

  public void setReactNativeHost(ReactNativeHost reactNativeHost) {
    mReactNativeHost = reactNativeHost;
  }

  @Override
  public ReactNativeHost getReactNativeHost() {
    return mReactNativeHost;
  }

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

然後頁面上便可以呼叫了，呼叫方式：

import { NativeModules } from 'react-native';

const Badge = NativeModules.Badge;

Badge.showBadge(5);