react-native 结合原生安卓实现角标

..最近由于项目需求，需要在app中实现一个角标的功能，搜索后得知在安卓中，原生是不支持角标BadgeNumber的,ios原生的话是支持的，不过目前没有接触ios相关的东西，也就不去研究了，下面主要是在安卓上实现的。

使用到的一个开源的库。https://github.com/leolin310148/ShortcutBadger#samsung

目前所支持的机型也是说清楚了的，所以并不是所有机型都支持的。

结合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);