采用推送時鸠真，經(jīng)常需要在App上顯示消息數(shù)量，但是Android并沒有原生的接口可以供調(diào)用。而且各大廠商的實現(xiàn)也是五花八門。尤其是在Rn開發(fā)中也沒有現(xiàn)成的組件。本篇詳細介紹如何搭建角標桩撮。采用第三方Android組件芜果。
組件地址# https://github.com/leolin310148/ShortcutBadger#samsung
直接下載下來即可诬滩。
1導入組件
將下載下來的組件copy到android項目中。
image.png
image.png
2.橋接應(yīng)用組件吴攒，需要如下配置
1.項目中的android文件夾中的settings.gradle中加入下面
include ':ShortcutBadger'
image.png
2.android文件夾中的build.gradle中加入
subprojects {
buildscript {
repositories {
jcenter()
mavenCentral()
}
dependencies {
classpath 'com.android.tools.build:gradle:2.2.3'
}
}
repositories {
jcenter()
mavenCentral()
}
}
image.png
3.android下的app下的build.gradle中找到dependencies,在這個配置里加入
compile project(':ShortcutBadger')
image.png
4.解決啟動報錯的問題诡右，junit報錯域那。
這樣搭建完王带，我啟動會報錯束倍。大致是無法下載junit甥桂。
加入這個配置即可
allprojects {
repositories {
mavenLocal()
jcenter()
maven {
// All of React Native (JS, Obj-C sources, Android binaries) is installed from npm
url "$rootDir/../node_modules/react-native/android"
}
// ADD THIS
maven { url 'https://maven.google.com' }
maven { url 'http://repo1.maven.org/maven2' }
// ADD THIS
maven { url "https://jitpack.io" }
}
}
最主要的就是這個配置
maven { url 'http://repo1.maven.org/maven2' }
image.png
5.增加ShortcutBadger配置
allprojects {
repositories {
mavenLocal()
jcenter()
maven {
// All of React Native (JS, Obj-C sources, Android binaries) is installed from npm
url "$rootDir/../node_modules/react-native/android"
}
// ADD THIS
maven { url 'https://maven.google.com' }
maven { url 'http://repo1.maven.org/maven2' }
// ADD THIS
maven { url "https://jitpack.io" }
}
}
image.png
這樣基礎(chǔ)的配置就都搞定了民镜。
3.添加原生代碼
以下代碼畔况，我會連同包名一起copy馋嗜，達到你copy就能使用听皿，很傻瓜。
1.添加BadgeModule.java類
package com.emsapp; **切記改成你自己的包名**
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端調(diào)用時會用到的
*/
@Override
public String getName() {
return "Badge";
}
/**
*這個方法是我們js端調(diào)用的方法尉姨，其中的參數(shù)可以從js端傳過來 如這里我們js端可以類似 Badge.showBadge(2)來調(diào)用這個方法
*/
@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.添加BadgePackage.java類
package com.emsapp; **切記改成你自己的包名**
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<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.java類
// 注意這里庵朝，是我們的package
new BadgePackage(),
image.png
4EeactNative內(nèi)使用
1.導入組件
import {NativeModules} from 'react-native';
image.png
2.使用
const badge = NativeModules.Badge;
badge.showBadge(5);
總結(jié)，在使用第三方組件時候又厉。并不能確保所有的android手機都能顯示角標九府。例如我的vivoX23就不可以，華為沒有問題覆致。這個github上已經(jīng)列出了常用的手機型號侄旬。
開始我繞的坑，以為是搭建不成功煌妈，調(diào)試了一圈原生組件儡羔，發(fā)現(xiàn)這么搭建是沒有問題的宣羊。文章我自己已經(jīng)羅列的足夠細致，有問題可以給我留言汰蜘，或者聯(lián)系我的QQ337241905仇冯。
參考的文章之一：原文連接https://blog.csdn.net/lqx_sunhan/article/details/80377482#comments
