移动推送+ReactNative最佳实践方法有哪些？（1）

React Native (简称RN)是Facebook于2015年4月开源的跨平台移动应用开发框架，是Facebook早先开源的UI框架 React 在原生移动应用平台的衍生产物，目前支持iOS和安卓两大平台。RN使用Javascript语言，类似于HTML的JSX，以及CSS来开发移动应用，因此熟悉Web前端开发的技术人员只需很少的学习就可以进入移动应用开发领域。
近年来Web化已成为移动端开发的一大趋势，越来越多的开发者倾向于使用ReactNative等web框架来开发App，而阿里云移动推送同样支持ReactNative开发模式，接下来为大家介绍如何在ReactNative工程中集成阿里云推送。

1. 构建您的ReactNative


如果您已有构建好的ReactNative工程，可直接跳过本节。如果您是第一次接触ReactNative，可以参考官方教程创建自己的第一个ReactNative应用。

2. 接入移动推送Android SDK


本节以ReactNative实例工程AwesomeProject作为实例工程为大家介绍Android推送SDK的接入步骤。可先下载Demo示例工程,再结合本教程效果更佳。

2.1 接入推送SDK


ReactNative模式下接入移动推送SDK的方式和传统Android开发模式下接入SDK一样，相关接入方式可以参考： 移动推送SDK接入指南

2.2 JavaScript调用推送SDK Native接口


ReactNative模式下常常需要通过JavaScript调用推送SDK native接口，完整调用过程包含以下三步。

2.2.1 创建PushModule模块


创建PushModule，继承自ReactContextBaseJavaModule,可参考以下代码：

1. [backcolor=transparent]public[backcolor=transparent] [backcolor=transparent]class[backcolor=transparent] [backcolor=transparent]PushModule[backcolor=transparent] [backcolor=transparent]extends[backcolor=transparent] [backcolor=transparent]ReactContextBaseJavaModule[backcolor=transparent] [backcolor=transparent]{
2. [backcolor=transparent]    [backcolor=transparent]private[backcolor=transparent] [backcolor=transparent]static[backcolor=transparent] [backcolor=transparent]ReactContext[backcolor=transparent] context[backcolor=transparent];
3. [backcolor=transparent]    [backcolor=transparent]public[backcolor=transparent] [backcolor=transparent]PushModule[backcolor=transparent]([backcolor=transparent]ReactApplicationContext[backcolor=transparent] reactContext[backcolor=transparent])[backcolor=transparent] [backcolor=transparent]{
4. [backcolor=transparent]        [backcolor=transparent]super[backcolor=transparent]([backcolor=transparent]reactContext[backcolor=transparent]);
5. [backcolor=transparent]        context [backcolor=transparent]=[backcolor=transparent] reactContext[backcolor=transparent];
6. [backcolor=transparent]    [backcolor=transparent]}
8. [backcolor=transparent]    [backcolor=transparent]public[backcolor=transparent] [backcolor=transparent]static[backcolor=transparent] [backcolor=transparent]ReactContext[backcolor=transparent] getContext[backcolor=transparent]()[backcolor=transparent] [backcolor=transparent]{
9. [backcolor=transparent]        [backcolor=transparent]return[backcolor=transparent] context[backcolor=transparent];
10. [backcolor=transparent]    [backcolor=transparent]}
12. [backcolor=transparent]    [backcolor=transparent]//模块名，在JavaScript中调用相关方法时需要首先引入MPush模块
13. [backcolor=transparent]    [backcolor=transparent]@Override
14. [backcolor=transparent]    [backcolor=transparent]public[backcolor=transparent] [backcolor=transparent]String[backcolor=transparent] getName[backcolor=transparent]()[backcolor=transparent] [backcolor=transparent]{
15. [backcolor=transparent]        [backcolor=transparent]return[backcolor=transparent] [backcolor=transparent]"MPush"[backcolor=transparent];
16. [backcolor=transparent]    [backcolor=transparent]}
18. [backcolor=transparent]    [backcolor=transparent]@ReactMethod
19. [backcolor=transparent]    [backcolor=transparent]public[backcolor=transparent] [backcolor=transparent]void[backcolor=transparent] getDeviceId[backcolor=transparent]([backcolor=transparent]Callback[backcolor=transparent] callback[backcolor=transparent])[backcolor=transparent] [backcolor=transparent]{
20. [backcolor=transparent]        callback[backcolor=transparent].[backcolor=transparent]invoke[backcolor=transparent]([backcolor=transparent]PushServiceFactory[backcolor=transparent].[backcolor=transparent]getCloudPushService[backcolor=transparent]().[backcolor=transparent]getDeviceId[backcolor=transparent]());
21. [backcolor=transparent]    [backcolor=transparent]}
23. [backcolor=transparent]    [backcolor=transparent]@ReactMethod
24. [backcolor=transparent]    [backcolor=transparent]public[backcolor=transparent] [backcolor=transparent]void[backcolor=transparent] bindAccount[backcolor=transparent]([backcolor=transparent]String[backcolor=transparent] account[backcolor=transparent],[backcolor=transparent] [backcolor=transparent]final[backcolor=transparent] [backcolor=transparent]Callback[backcolor=transparent] callback[backcolor=transparent])[backcolor=transparent] [backcolor=transparent]{
25. [backcolor=transparent]        [backcolor=transparent]PushServiceFactory[backcolor=transparent].[backcolor=transparent]getCloudPushService[backcolor=transparent]().[backcolor=transparent]bindAccount[backcolor=transparent]([backcolor=transparent]account[backcolor=transparent],[backcolor=transparent] [backcolor=transparent]new[backcolor=transparent] [backcolor=transparent]CommonCallback[backcolor=transparent]()[backcolor=transparent] [backcolor=transparent]{
26. [backcolor=transparent]            [backcolor=transparent]@Override
27. [backcolor=transparent]            [backcolor=transparent]public[backcolor=transparent] [backcolor=transparent]void[backcolor=transparent] onSuccess[backcolor=transparent]([backcolor=transparent]String[backcolor=transparent] s[backcolor=transparent])[backcolor=transparent] [backcolor=transparent]{
28. [backcolor=transparent]                callback[backcolor=transparent].[backcolor=transparent]invoke[backcolor=transparent]([backcolor=transparent]"bind account success"[backcolor=transparent]);
29. [backcolor=transparent]            [backcolor=transparent]}
31. [backcolor=transparent]            [backcolor=transparent]@Override
32. [backcolor=transparent]            [backcolor=transparent]public[backcolor=transparent] [backcolor=transparent]void[backcolor=transparent] onFailed[backcolor=transparent]([backcolor=transparent]String[backcolor=transparent] s[backcolor=transparent],[backcolor=transparent] [backcolor=transparent]String[backcolor=transparent] s1[backcolor=transparent])[backcolor=transparent] [backcolor=transparent]{
33. [backcolor=transparent]                callback[backcolor=transparent].[backcolor=transparent]invoke[backcolor=transparent]([backcolor=transparent]"bind account failed. errorCode:"[backcolor=transparent] [backcolor=transparent]+[backcolor=transparent] s [backcolor=transparent]+[backcolor=transparent] [backcolor=transparent]", errorMsg:"[backcolor=transparent] [backcolor=transparent]+[backcolor=transparent] s1[backcolor=transparent]);
34. [backcolor=transparent]            [backcolor=transparent]}
35. [backcolor=transparent]        [backcolor=transparent]});
36. [backcolor=transparent]    [backcolor=transparent]}
37. [backcolor=transparent]    [backcolor=transparent]......
39. [backcolor=transparent]}

• getName(): 这个方法用于在JavaScript 端标记这个模块。这里我们把这个模块命名为 MPush，这样就可以在 JavaScript 中通过 NativeModules.MPush 访问到这个模块
• @ReactMethod：要导出一个方法给 JavaScript 使用，Java 方法需要使用注解 @ReactMethod，方法的返回类型必须为 void。React Native 的跨语言访问是异步进行的，所以想要给 JavaScript 返回一个值的唯一办法是使用回调函数或者发送事件

1. [backcolor=transparent]public[backcolor=transparent] [backcolor=transparent]class[backcolor=transparent] [backcolor=transparent]PushPackage[backcolor=transparent] [backcolor=transparent]implements[backcolor=transparent] [backcolor=transparent]ReactPackage[backcolor=transparent] [backcolor=transparent]{
2. [backcolor=transparent]    [backcolor=transparent]@Override
3. [backcolor=transparent]    [backcolor=transparent]public[backcolor=transparent] [backcolor=transparent]List[backcolor=transparent]<[backcolor=transparent]NativeModule[backcolor=transparent]>[backcolor=transparent] createNativeModules[backcolor=transparent]([backcolor=transparent]ReactApplicationContext[backcolor=transparent] reactContext[backcolor=transparent])[backcolor=transparent] [backcolor=transparent]{
4. [backcolor=transparent]        [backcolor=transparent]List[backcolor=transparent]<[backcolor=transparent]NativeModule[backcolor=transparent]>[backcolor=transparent] modules [backcolor=transparent]=[backcolor=transparent] [backcolor=transparent]new[backcolor=transparent] [backcolor=transparent]ArrayList[backcolor=transparent]<>();
5. [backcolor=transparent]        modules[backcolor=transparent].[backcolor=transparent]add[backcolor=transparent]([backcolor=transparent]new[backcolor=transparent] [backcolor=transparent]PushModule[backcolor=transparent]([backcolor=transparent]reactContext[backcolor=transparent]));
6. [backcolor=transparent]        [backcolor=transparent]return[backcolor=transparent] modules[backcolor=transparent];
7. [backcolor=transparent]    [backcolor=transparent]}
9. [backcolor=transparent]    [backcolor=transparent]@Override
10. [backcolor=transparent]    [backcolor=transparent]public[backcolor=transparent] [backcolor=transparent]List[backcolor=transparent]<[backcolor=transparent]Class[backcolor=transparent]<?[backcolor=transparent] [backcolor=transparent]extends[backcolor=transparent] [backcolor=transparent]JavaScriptModule[backcolor=transparent]>>[backcolor=transparent] createJSModules[backcolor=transparent]()[backcolor=transparent] [backcolor=transparent]{
11. [backcolor=transparent]        [backcolor=transparent]return[backcolor=transparent] [backcolor=transparent]Collections[backcolor=transparent].[backcolor=transparent]emptyList[backcolor=transparent]();
12. [backcolor=transparent]    [backcolor=transparent]}
14. [backcolor=transparent]    [backcolor=transparent]@Override
15. [backcolor=transparent]    [backcolor=transparent]public[backcolor=transparent] [backcolor=transparent]List[backcolor=transparent]<[backcolor=transparent]ViewManager[backcolor=transparent]>[backcolor=transparent] createViewManagers[backcolor=transparent]([backcolor=transparent]ReactApplicationContext[backcolor=transparent] reactContext[backcolor=transparent])[backcolor=transparent] [backcolor=transparent]{
16. [backcolor=transparent]        [backcolor=transparent]return[backcolor=transparent] [backcolor=transparent]Collections[backcolor=transparent].[backcolor=transparent]emptyList[backcolor=transparent]();
17. [backcolor=transparent]    [backcolor=transparent]}
18. [backcolor=transparent]}