preface

Recently, the project needs to integrate the message push function. In previous projects, aurora push scheme was used, but now the company’s Android is using push message push, so we plan to use a push scheme in this RN reconstruction project. React Native SDK (support Android & iOS) React – Native – Getui ReactNative version: 0.63.4

integration

1. Automatically add dependencies

yarn add react-native-getui

cd ios
pod install
Copy the code

2. Manually add the configuration

The android part

1. In Android /build.gradle, add The Maven address and add the configuration
maven {
            url "http://mvn.gt.igexin.com/nexus/content/repositories/releases/"
        }
Copy the code

2. In the Android directory, add the following configuration in app/build.gradle

Add dependencies to dependencies

implementation project(':react-native-getui')
Copy the code
3. Add the following configuration in Android –> defaultConfig
When you configure the manifestplaceholder = [GETUI_APP_ID: "your app id", GETUI_APP_KEY : "your app key", GETUI_APP_SECRET : "your app secret" ]Copy the code

Note: yourAppId yourAppKey/yourAppSecret need to go to a website After registration, the configuration in the background.

4. The android/app/AndroidManifest. Add meta – data in XML tag
<! ${GETUI_APP_ID}" Tools :replace="android:value"/> <meta-data android:name="PUSH_APPID" Android :value="${GETUI_APP_ID}" tools:replace="android:value"/> <meta-data android:name="PUSH_APPKEY" android:value="${GETUI_APP_KEY}" tools:replace="android:value"/> <meta-data android:name="PUSH_APPSECRET" android:value="${GETUI_APP_SECRET}" tools:replace="android:value"/> <meta-data android:name="MEIZUPUSH_APPID" android:value="" tools:replace="android:value"/> <meta-data android:name="MEIZUPUSH_APPKEY" android:value="" tools:replace="android:value"/> <meta-data android:name="MIPUSH_APPID" android:value="" tools:replace="android:value"/> <meta-data android:name="MIPUSH_APPKEY" android:value="" tools:replace="android:value"/> <meta-data android:name="OPPOPUSH_APPKEY" android:value="" tools:replace="android:value"/> <meta-data android:name="OPPOPUSH_APPSECRET" android:value="" tools:replace="android:value"/> <meta-data android:name="com.vivo.push.app_id" android:value="" tools:replace="android:value"/> <meta-data android:name="com.vivo.push.api_key" android:value="" tools:replace="android:value"/> <meta-data android:name="com.huawei.hms.client.appid" android:value="" tools:replace="android:value"/>Copy the code
5. Add the following information to the mainApplication. Java file
import com.getui.reactnativegetui.GetuiModule; @Override public void onCreate() { super.onCreate(); SoLoader.init(this, /* native exopackage */ false); // Initialize the push module getuiModule.initpush (this); initializeFlipper(this, getReactNativeHost().getReactInstanceManager()); }Copy the code

ReactNative project JS call code

class GetuiPush extends Component{ componentDidMount() { this._initGetuiPushListener() } _initGetuiPushListener = () => {/ / subscribe message notice this. ReceiveRemoteNotificationSub = NativeAppEventEmitter. AddListener (' receiveRemoteNotification ', (notification) => { switch (notification.type) { case "cid": Console. log(' initialize to get CID ', json.stringify (notification)) break; Case 'payload': console.log('payload ', json.stringify (notification)) break case 'CMD ': Console. log(' CMD message notification ', 'CMD Action =' + notification.cmd) break case 'notificationArrived': Console. log('notificationArrived ', json.stringify (notification)) break case 'notificationClicked': Console. log('notificationArrived notification click ', json.stringify (notification)) break default: break}}); } componentWillUnmount () {/ / remove message to monitor this. ReceiveRemoteNotificationSub && enclosing receiveRemoteNotificationSub. Remove (); } render() { return null; }}Copy the code

Problems encountered

By following the above steps, you can normally push messages to your mobile phone through the official website of twitter, but… Everything is afraid of but, ha ha. When I push the business of the company’s project, there is no response in the notification bar of my mobile phone. There is no text or sound prompt for push message, which is very uncomfortable. Next, I checked the notification Settings of my phone and tested them with my colleagues. I found that his android native project could receive push normally. I asked my colleagues in the background and said there was no special Settings. Later, I looked at my colleague’s Android code and found that it was actually using a push through message, and then processed it. oh my god! See zhaojian zhaozhao, read a push of the official website, is introduced in this way through (custom message) and ordinary message difference.

Notification messages and passthrough

  • Notification message:

Notification display effect: ring, vibration, whether the notification can be cleared, pull down the large picture, long text. Effect after notification is clicked: Open the home page of the application, open the specified page in the application, and open the specified page in the browser.

  • Transparent message:

The effect is managed by the developer. The user is only responsible for message delivery and does not do any processing. It will not be displayed in the notification bar by default.

After reading the above instructions, I got a general understanding, and communicated with my colleagues in the background that the transparent mode is indeed adopted, which means that message push is carried out through the transparent mode. If user prompt is needed, developers need to implement it by themselves.

ReactNative handles transparent messages

If you need to pass information through the notification bar to remind users, it is equivalent to local notification push. This can be handled by implementing native code, or by using some third party, which is recommendedreact-native-push-notificationProcess. When using this library, you may get the following error message:Just set requestPermissions to false:

/** * (optional) default: true * - Specified if permissions (ios) and token (android and ios) will requested or not, * - if not, you must call PushNotificationsHandler.requestPermissions() later * - if you are not using remote notification or do not  have Firebase installed, use this: * requestPermissions: Platform.OS === 'ios' */ requestPermissions: false,Copy the code

conclusion

This is the end of sharing, welcome to leave a comment about technology and workplace life.

Think the article is good, give me a thumbs up, pay attention to bai! Technical exchange can pay attention to the public number [Jun Wei said], add my friends to discuss the exchange group: Wayne214 (remarks technical exchange) invite you to join the group, study together to make progress