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

记录最近实现的功能（通过搜索查询别人实现的）

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

使用到的一个开源的库。https://github.com/leolin310148/ShortcutBadger#samsung
目前所支持的机型也是说清楚了的，所以并不是所有机型都支持的。

结合react-native实现
因为那个库是安卓的库，我这个项目是rn写的，所以我得把他们结合起来，主要方法呢主要是参照官网中的rn与原始模块通信，接下来写一下步骤:
1.在rn项目中引入库
上面的github中的东西下载完成后，将下面文件复制到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()
    }
}

并在allprojects/repositories加入

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

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

implementation project(':ShortcutBadger')

 4.将android文件夹中的build.gradle中allprojects复制到ShortcutBadger文件中的build.gradle中，并将apply from: './mvn-push.gradle'删除

这样的话就算是把这个库引入我们的项目中了。

2.写安卓原生代码,实现与rn的通信（注意引入的包名写自己项目中的）

1.写一个类继承ReactContextBaseJavaModule

package com.testapp;
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.写一个类实现ReactPackage注册这个module

package com.testapp;
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中添加package

import com.testapp.BadgePackage;

packages.add(new BadgePackage());

package com.testapp;

import android.app.Application;
import android.content.Context;
import com.facebook.react.PackageList;
import com.facebook.react.ReactApplication;
import com.facebook.react.ReactInstanceManager;
import com.facebook.react.ReactNativeHost;
import com.facebook.react.ReactPackage;
import com.facebook.soloader.SoLoader;
import java.lang.reflect.InvocationTargetException;
import java.util.List;
import com.testapp.BadgePackage;
public class MainApplication extends Application implements ReactApplication {

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

        @Override
        protected List<ReactPackage> getPackages() {
          @SuppressWarnings("UnnecessaryLocalVariable")
          List<ReactPackage> packages = new PackageList(this).getPackages();
          // Packages that cannot be autolinked yet can be added manually here, for example:
          packages.add(new BadgePackage());
          return packages;
        }

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

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

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

  /**
   * Loads Flipper in React Native templates. Call this in the onCreate method with something like
   * initializeFlipper(this, getReactNativeHost().getReactInstanceManager());
   *
   * @param context
   * @param reactInstanceManager
   */
  private static void initializeFlipper(
      Context context, ReactInstanceManager reactInstanceManager) {
    if (BuildConfig.DEBUG) {
      try {
        /*
         We use reflection here to pick up the class that initializes Flipper,
        since Flipper library is not available in release mode
        */
        Class<?> aClass = Class.forName("com.testapp.ReactNativeFlipper");
        aClass
            .getMethod("initializeFlipper", Context.class, ReactInstanceManager.class)
            .invoke(null, context, reactInstanceManager);
      } catch (ClassNotFoundException e) {
        e.printStackTrace();
      } catch (NoSuchMethodException e) {
        e.printStackTrace();
      } catch (IllegalAccessException e) {
        e.printStackTrace();
      } catch (InvocationTargetException e) {
        e.printStackTrace();
      }
    }
  }
}

然后页面上便可以调用了，调用方式：

{NativeModules} from 'react-native';

const Badge = NativeModules.Badge;

Badge.showBadge(4);