Tích hợp module nhảy vào phần settings trên thiết bị để cài đặt thông báo ( module open notification manager)

 Tích hợp module nhảy vào phần settings

trên thiết bị để cài đặt thông báo

cho ứng dụng React Native

Bài này TíT xin nói về tích hợp module như tiêu đề đã nêu nha😅😅. 

• ANDROID

Theo như TíT tìm hiểu thì hình như React Native không cho link tới sẵn phần Quản lý thông báo (Notification Manager) của thiết bị android, nên TíT tìm hiểu để làm một cái task trước đây đã được sếp giao cho.

Đầu tiên, bạn hãy tạo folder để chứa code java, ví dụ là openmanagernotification. Tạo folder này ở android/app/src/main/java.

Trong folder này bạn tạo 2 file java có thể như TíT này nhá👇👇👇

• OpenManagerNotificationModule.java

package openmanagernotification;

import android.content.Intent;

import android.net.Uri;

import android.os.Build;

import android.provider.Settings;

import com.facebook.react.bridge.ReactApplicationContext;

import com.facebook.react.bridge.ReactContextBaseJavaModule;

import com.facebook.react.bridge.Callback;

import com.facebook.react.bridge.ReactMethod;

import com.facebook.react.uimanager.IllegalViewOperationException;

public class OpenManagerNotificationModule extends ReactContextBaseJavaModule {

public OpenManagerNotificationModule(ReactApplicationContext reactContext) {

super(reactContext);

}

@Override

public String getName() {

return "OpenSettingNotification";

}

@ReactMethod

public void openSettingNotificationApp() {

if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.O) {

Intent intent = new Intent(Settings.ACTION_APP_NOTIFICATION_SETTINGS).putExtra(Settings.EXTRA_APP_PACKAGE, getReactApplicationContext().getPackageName());

intent.addFlags(Intent.FLAG_ACTIVITY_NEW_TASK);

getReactApplicationContext().startActivity(intent);

} else {

Intent intent = new Intent(Settings.ACTION_APPLICATION_DETAILS_SETTINGS);

intent.setData(Uri.parse("package:" + getReactApplicationContext().getPackageName()));

intent.addFlags(Intent.FLAG_ACTIVITY_NEW_TASK);

getReactApplicationContext().startActivity(intent);

}

}

}

Phần này chỉ là code android thuii ai học qua thì cũng biết đúng khôngg👏

• OpenManagerNotificationPackage.java

package openmanagernotification;

import com.facebook.react.ReactPackage;

import com.facebook.react.bridge.NativeModule;

import com.facebook.react.bridge.ReactApplicationContext;

import com.facebook.react.uimanager.ViewManager;

import java.util.ArrayList;

import java.util.Collections;

import java.util.List;

import openmanagernotification.OpenManagerNotificationModule;

public class OpenManagerNotificationPackage implements ReactPackage {

@Override

public List<ViewManager> createViewManagers(ReactApplicationContext reactContext) {

return Collections.emptyList();

}

@Override

public List<NativeModule> createNativeModules(ReactApplicationContext reactContext) {

List<NativeModule> modules = new ArrayList<>();

modules.add(new OpenManagerNotificationModule(reactContext));

return modules;

}

}

Sau khi đã có code module này rồi thì nhớ inport nó vô MainApplication để từ React Native có thể dùng module này nha. Vô file MainApplication.java

import openmanagernotification.OpenManagerNotificationPackage;

@Override

protected List<ReactPackage> getPackages() {

@SuppressWarnings("UnnecessaryLocalVariable")

List<ReactPackage> packages = new PackageList(this).getPackages();

packages.add(new OpenManagerNotificationPackage()); // <-- add here

return packages;

}

Xong phần chuẩn bị rồi. Build app và test thoai👌. Tại file mà bạn muốn dùng:

const openSettingNotification = NativeModules.OpenSettingNotification;

Nhớ import NativeModules từ react-native nha. "OpenSettingNotification" là tên lấy từ hàm getName ở file OpenManagerNotificationModule đó, và hàm openSettingNotificationApp cũng là tên lấy từ file đó luôn. Rồi khi click vào button thì gọi hàm này là xong 👉

goToSettingManagerNotification = async () => {

    openSettingNotification.openSettingNotificationApp();

}

À mà nhớ check là Android thì mới gọi tới hàm ý nha. Ios không gọi tới được đâu😂

• IOS

Còn Ios thì dễ thôi à, Linking của React Native đã support sẵn rồi. Chỉ việc gọi thôi👇👇👇

goToSettingManagerNotification = async () => {

Linking.openURL('App-Prefs:NOTIFICATIONS_ID&path=<bundle_id>')

}

bundle_id thì các bạn lấy Bundle Identifier từ XCode của project nha.

Vậy là đã xong phần tích hợp module vào màn hình Quản lý thông báo (Notification Manager) trên React Native. TíT sẽ tiếp tục tìm hiểu các module khác và chia sẻ với mọi người. Mong rằng mọi người hãy góp ý để TíT hoàn thiện tốt hơn💋