React-Native极光推送双端配置

开发步骤

  1. 安装WebStorm,激活使用
  2. 安装node到默认位置
  3. 配置npm的镜像资源(国内访问
  4. npm安装yarn、react-native-cli
  5. 在WebStorm新建项目,选择React-Native,并选择保存地址,设置项目名称,进行创建

环境配置

  1. init新建一个项目之后,将node_modules删除,并且在项目文件夹中执行npm install, 重新安装所有的插件。
  2. 选择要用的组件,进行 npm install yourComponent --save
  3. 可以使用yarn add 代替 npm installl

iOS开发者证书申请

  1. 拥有一个iOS开发者账号,$99一年
  2. 在Xcode9中打开React-Native项目中的..//ios/***.xcodeproj
  3. 修改Bundle Identifier【重要】(后面会在JPush推送设置中使用,务必小心统一)
  4. 选择Signing中的Team
  5. 进入Capabilities,打开Push Notifications,稍等一会即可,再打开Background Modes,选择最后一个Remote notifications
  6. 进入开发者证书配置,直接选择App IDs,找到ID为你设置的Bundle Identifier的项目,点击展开,最下面找到Edit,找到Push Notifications
  7. Create an additional certificate to use for this App ID. 开发环境和生产环境,全部变绿即可

极光官网配置

  1. 进入极光开发者服务,创建一个应用,应用名 按照要求填写,自己上传图标
  2. 创建成功,看到AppKey,在下面找到推送设置,开始配置
  3. 采用Token Authentication,在开发者网站,找到Keys,点击加号,生成一个Key,名字自定,下载到本地(重要,保存)
  4. 在配置页面,进行iOS配置,上传APNs Auth Key,选择上面生成的文件
  5. 在开发者网站中,找到刚刚生成的Key ID,复制到配置界面
  6. 在[开发者网站]中,找到Team ID,复制到配置界面
  7. 在Bundle ID中,填写你设置的Bundle ID,配置完成,保存,然后在选择鉴权方式中选择Token Authentication

JPush 极光推送配置

  1. npm install jpush-react-native --save执行成功
  2. npm install jcore-react-native —save执行成功
  3. jpush需要的组件安装完毕,在极光官网创建一个项目,找到appKey
  4. 在项目目录中执行 npm run configureJPush
  5. 上述执行成功后,执行react-native link
  6. 参考极光推送React-Native进行手动配置
  7. 需要iOS开发者证书支持

手动配置iOS

  1. Xcode9打开项目文件,找到info.plist,设置ATS权限
    App Transport Security Settings
    添加Allow Arbitrary Loads : YES
    子目录下Exception Domains
    添加jpush.cn
    jpush.cn下添加
    NSExceptionAllowsInsecureHTTPLoads : YES
    NSIncludesSubdomains : YES
  2. Build Phases中Link Binary With Libraries,找到UserNotifications.framework 状态改为 Optional

手动配置Android

  1. 在 ../android/app/src/main/java/com/***/MainApplication.java 中添加
    public class MainApplication extends Application implements 
    ReactApplication `中添加
    private boolean SHUTDOWN_TOAST = false;
    private boolean SHUTDOWN_LOG = false;
    protected List getPackages()中添加
    new JPushPackage(SHUTDOWN_TOAST, SHUTDOWN_LOG)```
    最后一行不许有逗号
    
  2. 在 ../android/app/build.gradle中修改
  ...
  defaultConfig{
      applicationId "" // 修改为极光推送中android应用包名
      ...
      manifestPlaceholders = [ // 添加
          JPUSH_APPKEY: "", // 极光推送中应用AppKey  
          APP_CHANNEL: "developer-dange"  //下载渠道  
      ]
  }
 }
  1. 修改 MainActivety.java 中的包名,改为BundleID;
  2. 修改MainApplication.java 中的包名,改为BundleID;
  3. 修改AndroidManifest.xml中的包名,改为BundleID;
  4. 根据包名修改文件关系

作者介绍

安徽安大笃北信息科技有限责任公司 端工程师 DAN 花名:太子 QQ:542168513

你可能感兴趣的:(React-Native极光推送双端配置)