React Native 安卓原生角标

使用友盟推送，发现没有集成设置角标功能，因此就自己查阅文档等方式写了一个设置角标的功能。笔者安卓小白，不懂安卓，大神勿喷。

React Native 已提供Ios版插件,但对Android并未支持。国内安卓基本上都是深度定制过的，各方产商定制方法各不相同,我选择使用第三方开源的项目实现。

环境

    "react": "16.9.0",
    "react-native": "0.61.4",

安卓第三方插件

ShortcutBadger

ShortcutBadger 引入

• 修改android/app/build.gradle

...
dependencies {
    implementation "me.leolin:ShortcutBadger:1.1.22@aar"
    ...
}
....

实现原生与ReactNative通信

• 新建badge文件夹
• 在badge文件夹中，新建 ShortcutBadgerModule(类)文件 继承 ReacContextBaseJavaModule

package com.jgadasdapp;  引入自己的包名

import com.facebook.react.bridge.ReactApplicationContext;
import com.facebook.react.bridge.ReactContextBaseJavaModule;
import com.facebook.react.bridge.ReactMethod;
import me.leolin.shortcutbadger.ShortcutBadger; // 引入外部导入的第三方包


public class ShortcutBadgerModule extends ReactContextBaseJavaModule {
    static ReactApplicationContext context;

    public ShortcutBadgerModule(ReactApplicationContext reactContext) {
        super(reactContext);
        context = reactContext;
    }

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

    /**
    *这个方法是我们js端调用的方法，其中的参数可以从js端传过来  如这里我们js端可以类似  Badge.applyCount(2)来调用这个方法
    */
    
    @ReactMethod
    public void applyCount(int badgeCount){
        if(context != null){
            ShortcutBadger.applyCount(context,badgeCount);
        }   
    }

    @ReactMethod
    public void removeCount(){
        if(context != null){
            ShortcutBadger.removeCount(context);
        }
    }
}

• 注册模块

新建 ShortcutBadgerReactPackage(包)文件 继承 ReactPackage

package com.jgadasdapp;

import java.util.ArrayList;
import java.util.Arrays;
import java.util.Collections;
import java.util.List;

import com.facebook.react.ReactPackage;
import com.facebook.react.bridge.JavaScriptModule;
import com.facebook.react.bridge.NativeModule;
import com.facebook.react.bridge.ReactApplicationContext;
import com.facebook.react.shell.MainReactPackage;
import com.facebook.react.uimanager.ViewManager;
import com.more.shop.badge.ShortcutBadgerModule;

/**
 * Created by surile on 13/5/20.
 */

public class ShortcutBadgerReactPackage implements ReactPackage {

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

    /**
     * 如需要添加本地方法，只需在这里add
     *
     * @param reactContext
     * @return
     */
    @Override
    public List<NativeModule> createNativeModules(
        ReactApplicationContext reactContext) {
        List<NativeModule> modules = new ArrayList<>();
        modules.add(new ShortcutBadgerModule(reactContext));
        return modules;
    }
}

• 在 MainApplication 里面注册 ShortcutBadgerReactPackage

        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 MyReactNativePackage());
          packages.add(new ShortcutBadgerReactPackage());
          return packages;
        }

ReactNative 中调用

• 引入 NativeModules

import {NativeModules, Platform} from 'react-native';
const ShortcutBadgerModule = NativeModules.ShortcutBadger;

• 设置角标

ShortcutBadgerModule.applyCount(1)

• 清除角标

ShortcutBadgerModule.removeCount()

参考

原生模块
友盟推送