JPush React Native 插件使用教程

JPush React Native 插件使用教程

jpush-react-nativeJPush's officially supported React Native plugin (Android & iOS). 极光推送官方支持的 React Native 插件（Android & iOS）。项目地址:https://gitcode.com/gh_mirrors/jp/jpush-react-native

1. 项目的目录结构及介绍

JPush React Native 插件的目录结构如下：

jpush-react-native/
├── android/
│   ├── app/
│   ├── build.gradle
│   ├── settings.gradle
│   └── ...
├── ios/
│   ├── JPushExample/
│   ├── JPushExample.xcodeproj/
│   ├── JPushExample.xcworkspace/
│   └── ...
├── lib/
│   ├── RCTJPushModule.a
│   └── RCTJCoreModule.a
├── example/
│   ├── App.js
│   ├── index.js
│   └── ...
├── index.js
├── package.json
├── README.md
└── ...

目录结构介绍

• android/：包含 Android 平台的项目文件和配置。
• ios/：包含 iOS 平台的项目文件和配置。
• lib/：包含原生模块的库文件。
• example/：包含示例项目的文件。
• index.js：项目的入口文件。
• package.json：项目的依赖和配置文件。
• README.md：项目的说明文档。

2. 项目的启动文件介绍

index.js

index.js 是 JPush React Native 插件的入口文件，负责初始化 React Native 应用并加载主应用组件。

import {AppRegistry} from 'react-native';
import App from './example/App';
import {name as appName} from './app.json';

AppRegistry.registerComponent(appName, () => App);

App.js

example/App.js 是示例项目的主应用组件，包含了应用的主要逻辑和界面。

import React, {Component} from 'react';
import {Platform, StyleSheet, Text, View} from 'react-native';
import JPushModule from 'jpush-react-native';

export default class App extends Component {
  componentDidMount() {
    JPushModule.initPush();
  }

  render() {
    return (
      <View style={styles.container}>
        <Text style={styles.welcome}>Welcome to JPush React Native!</Text>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  },
  welcome: {
    fontSize: 20,
    textAlign: 'center',
    margin: 10,
  },
});

3. 项目的配置文件介绍

package.json

package.json 文件包含了项目的依赖、脚本和其他配置信息。

{
  "name": "jpush-react-native",
  "version": "2.8.8",
  "description": "JPush's officially supported React Native plugin (Android & iOS)",
  "main": "index.js",
  "scripts": {
    "start": "react-native start",
    "test": "jest"
  },
  "dependencies": {
    "jcore-react-native": "^1.7.0",
    "react": "16.13.1",
    "react-native": "0.63.3"
  },
  "devDependencies": {
    "@babel/core": "^7.8.4",
    "@babel/runtime": "^7.8.4",
    "babel-jest": "^25.1.0",
    "jest": "^25.1.0",
    "react-test-renderer": "16.13.1"
  },
  "jest": {
    "preset": "react-native"
  }
}

build.gradle (Android)

android/build.gradle 文件包含了 Android 项目的构建配置。

buildscript {
  repositories {
    google()
    jcenter()
  }
  dependencies {
    classpath 'com.android.tools.build:gradle:3.5.3'
  }
}

allprojects {

jpush-react-nativeJPush's officially supported React Native plugin (Android & iOS). 极光推送官方支持的 React Native 插件（Android & iOS）。项目地址:https://gitcode.com/gh_mirrors/jp/jpush-react-native