react native android 通知栏

react native android 通知栏的实现

最近参与部门用react native实践的第一个项目接近尾声，在项目中rn的Android、iOS代码复用使我越来越感觉到rn开发的优势，rn结合native的开发方法可能是将来快速开发APP的主流趋势。

最近工作中遇到一个问题就是通知栏的实现，看了下rn并没有直接说明实现通知栏的方法，加上我个人之前也没搞过native的开发，所以一直没有思路，后来结合rn原生模块的调用和Android开发文档（需科学上网）给实现了，至于iOS的实现方法看文档说是需要开发者账号，就先放放...

具体实现流程

1、创建js调用的react模块，该步骤参考react native文档

//NotificationModule.js
public class NotificationModule extends ReactContextBaseJavaModule {
    public NotificationModule(ReactApplicationContext reactContext) {
        super(reactContext);
    @Override
    public String getName() {
        return "NotificationModule";
    }
    @ReactMethod
    public void startNotification(String title,String content){
        try{
            Intent intent = new Intent(getCurrentActivity(),NotificationService.class);
            intent.putExtra("title",title);
            intent.putExtra("content",content);
            getCurrentActivity().startService(intent);
        }catch(Exception e){
            throw new JSApplicationIllegalArgumentException(
                    "error "+e.getMessage());
        }
    }
}

//NotificationPackage.java
public class NotificationPackage implements ReactPackage {
    @Override
    public List<NativeModule> createNativeModules(ReactApplicationContext reactContext) {
        List<NativeModule> modules = new ArrayList<>();
        modules.add(new NotificationModule(reactContext));
        return modules;
    }
    @Override
    public List<Class<? extends JavaScriptModule>> createJSModules() {
        return Collections.emptyList();
    }
    @Override
    public List<ViewManager> createViewManagers(ReactApplicationContext reactContext) {
        return Collections.emptyList();
    }
}

并在MainApplication.java中加入该新建的模块。

2、创建生成通知栏的IntentService类,在该类中调用通知栏生成方法，具体参考谷歌的安卓开发文档

public class NotificationService extends IntentService {
    public NotificationService() {
        super("NotificationService");
    }
    @Override
    protected void onHandleIntent(Intent intent) {
        String title = intent.getStringExtra("title");
        String content = intent.getStringExtra("content");
        System.out.println(title+content);
        NotificationCompat.Builder mBuilder =
                new NotificationCompat.Builder(this)
       .setSmallIcon(R.drawable.directionscar)
                        .setContentTitle(title)
                        .setContentText(content);
        Intent resultIntent = new Intent(this, MainActivity.class);
        TaskStackBuilder stackBuilder = TaskStackBuilder.create(this);
stackBuilder.addParentStack(MainActivity.class);
        stackBuilder.addNextIntent(resultIntent);
        PendingIntent resultPendingIntent =
                stackBuilder.getPendingIntent(
                        0,
         PendingIntent.FLAG_UPDATE_CURRENT
                );
mBuilder.setContentIntent(resultPendingIntent);
        NotificationManager mNotificationManager =
                (NotificationManager) getSystemService(Context.NOTIFICATION_SERVICE);
        mNotificationManager.notify(1, mBuilder.build());
        stopSelf();
    }
}

需要注意的是：1、service生成通知后必须使用stopSelf()停止服务
；2、尽量使用Android studio自动生成service，会自动在manifest中进行配置。

具体实现思路就是通过js调用原生方法，在原生方法里创建intent，并通过intent调用service生成系统通知栏。

思路还是比较简单，主要是之前没有接触过native开发，所以一开始不清楚怎么做。通过rn快速生成APP页面，并通过与原生开发相结合的方式，可能会迎来广泛的应用。react native android 通知栏的实现就是这样，欢迎交流探讨...