Jpush-react-native Push function (Android article)

Source: Internet
Author: User

GitHub Original Address

Aurora Push official supported React Native Plugin

Installation

NPM Install jpush-react-native--save
NPM install jcore-react-native--save # jpush-react-native 1.4.2 will need to be installed at the same time jcore-react-native

First, the Automatic configuration section (the following commands are running under your REACT NATIVE PROJECT directory, which is still required to be manually configured after automatic configuration)

1.1 Execute Script
NPM Run Configurejpush <yourAppKey> <yourModuleName>
Module name refers to the name of the modules in your Android project (there is no effect on IOS, the default value for the app is not filled in, it will affect the search androidmanifest problem,
If you do not find androidmanifest, you need to manually modify, refer to the following androidmanifest configuration related instructions)
As an example:
NPM Run Configurejpush d4ee2375846bc30fa51334f5 app
1.2Link Project
Perform the automatic configuration script before you perform the link operation
React-native Link

Second, manual operation part (3 steps)

2.1

The first step: Modify the Build.gradle configuration under the app:
Your react native Project/android/app/build.gradle

Android {    Defaultconfig {        applicationid "Yourapplicationid" ...        Manifestplaceholders = [                jpush_appkey: "Yourappkey",//replace your APPKEY App_channel here                : "Developer-default"    // Application channel number        ]    }}...dependencies {    compile filetree (dir: "Libs", include: ["*.jar"])    Compile project (': Jpush-react-native ')  //Add Jpush dependent    compile project (': Jcore-react-native ')  //Add Jcore dependency    compile "com.facebook.react:react-native:+"  //From Node_modules}

Replace the Yourapplicationid here with the package name of your project, and Yourappkey replace it with the AppKey of the application you applied for on the official web site.

2.2

Check whether the following configuration items are imported:
Check to see if there are two dependencies in dependencies that add jpush-react-native and jcore-react-native.

Your react native Project/android/app/build.gradle

... dependencies {    compile filetree (dir: "Libs", include: ["*.jar"])    Compile project (': Jpush-react-native ')  //Add Jpush dependent    compile project (': Jcore-react-native ')  //Add Jcore dependency    compile "com.facebook.react: react-native:+ "  //From Node_modules}

  

Check that the Settings.gradle configuration under the Android project has the following content:

Settings.gradle

Include ': App ', ': jpush-react-native ', ': Jcore-react-native ' Project (': Jpush-react-native '). ProjectDir = new File ( Rootproject.projectdir, '. /node_modules/jpush-react-native/android ') Project (': Jcore-react-native '). ProjectDir = new File ( Rootproject.projectdir, '. /node_modules/jcore-react-native/android ')

  

Check the Androidmanifest configuration under the app, there is no Add <meta-data> section.

Your react native Project/android/app/androidmanifest.xml

<application ...        <!--Required. Enable it can get statistics data with channel-to-        <meta-data android:name= "Jpush_channel" android:value= "$ {App_channel} "/>        <meta-data android:name=" Jpush_appkey "android:value=" ${jpush_appkey} "/>    </ Application>

  

2.3: Join Jpushpackage (find Mainapplication.java under App):

App/src.../mainapplication.java

  Private Boolean shutdown_toast = false;    Private Boolean shutdown_log = false;    Private final Reactnativehost mreactnativehost = new Reactnativehost (this) {        @Override        protected Boolean Getusedevelopersupport () {            return buildconfig.debug;        }        @Override        protected list<reactpackage> getpackages () {            return arrays.<reactpackage>aslist (                    new Mainreactpackage (),                    //Join Jpushpackage                    New Jpushpackage (Shutdown_toast, Shutdown_log)            );

  

The two parameters above jpushpackage are of type bool, the first parameter is set to True to close the toast prompt, the second setting is true to turn off log printing, and it is recommended to open in debug version. Then add some initialization code to the mainactivity:

App/src.../mainactivity.java

public class Mainactivity extends Reactactivity {        ...    @Override    protected void onCreate (Bundle savedinstancestate) {        super.oncreate (savedinstancestate);        Jpushinterface.init (this);    }    @Override    protected void OnPause () {        super.onpause ();        Jpushinterface.onpause (this);    }    @Override    protected void Onresume () {        super.onresume ();        Jpushinterface.onresume (this);}    }

  

Receive push

When this event is added, this event is triggered when a push is received.

It is important to note that after the v1.6.6 version, the Notifyjsdidload method is added to call this method before all related events are monitored, otherwise no click Notification events are received .

Example/react-native-android/push_activity.js

... import jpushmodule from ' jpush-react-native ';.. export default class Pushactivity extends React.component {    Componentdidmount () {        ///Call this interface        Jpushmodule.notifyjsdidload ((ResultCode) + {            if (ResultCode) before receiving a click event = = = 0) {            }        });        Jpushmodule.addreceivenotificationlistener (map) = {            Console.log ("alertcontent:" + map.alertcontent);            Console.log ("Extras:" + Map.extras);            var extra = Json.parse (Map.extras);            Console.log (Extra.key + ":" + Extra.value);        });

  

Click Notifications

This event will be triggered when the user taps the notification.

... componentdidmount () {Jpushmodule.addreceiveopennotificationlistener (    map) = {            Console.log (" Opening notification! ");            Console.log ("Map.extra:" + Map.key);}        );

  

Get Registrationid

After the user registration is successful (usually after the user launches the app), if subscribed to this event, you will receive this registrationid.

...    Componentdidmount () {        Jpushmodule.addgetregistrationidlistener ((Registrationid) = {            Console.log (" Device register succeed, Registrationid "+ Registrationid);        });    

  

Clear all Notifications

It is recommended to call after the user exits the foreground.

   ...    Componentwillunmount () {        Console.log ("would clear all notifications");        Jpushmodule.clearallnotifications ();    }

  

Set label

Example/react-native-android/set_activity.js

  ...    Settag () {        if (this.state.tag!== undefined) {            /            * * Please note that this interface is going to pass an array past, here is just a simple demonstration            *                  / Jpushmodule.settags (["VIP", "Notvip"], () = {                Console.log ("Set tag Succeed");            }, () = {                Console.log ("Set tag Failed");}            );        }    

  

Setting aliases
...    Setalias () {        if (this.state.alias!== undefined) {            Jpushmodule.setalias (This.state.alias, () = = {                Console.log ("Set Alias Succeed");            }, () = {                Console.log ("set alias Failed");}            );        }    

  

Jpush-react-native Push function (Android article)

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.