使用友盟推送,发现没有集成设置角标功能,因此就自己查阅文档等方式写了一个设置角标的功能。笔者安卓小白,不懂安卓,大神勿喷。
React Native 已提供Ios版插件,但对Android并未支持。国内安卓基本上都是深度定制过的,各方产商定制方法各不相同,我选择使用第三方开源的项目实现。
环境
"react": "16.9.0",
"react-native": "0.61.4",
安卓第三方插件
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()
评论 (0)