React Native Remote Push 项目教程

5 0 0

React Native Remote Push 项目教程

react-native-remote-pushReact Native Remote Push Notifications Component项目地址:https://gitcode.com/gh_mirrors/re/react-native-remote-push

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




react-native-remote-push/


├── android/


│   ├── app/


│   ├── build.gradle


│   ├── gradle.properties


│   ├── settings.gradle


│   └── ...


├── ios/


│   ├── ReactNativeRemotePush/


│   ├── ReactNativeRemotePush.xcodeproj/


│   ├── ReactNativeRemotePushTests/


│   └── ...


├── src/


│   ├── components/


│   ├── screens/


│   ├── App.js


│   └── ...


├── .gitignore


├── .npmignore


├── package.json


├── README.md


└── ...

android/：包含Android项目的所有文件。ios/：包含iOS项目的所有文件。src/：包含React Native应用的主要源代码。
components/：存放React组件。screens/：存放应用的各个屏幕组件。App.js：应用的入口文件。 .gitignore：Git忽略文件配置。.npmignore：NPM忽略文件配置。package.json：项目依赖和脚本配置。README.md：项目说明文档。

2. 项目的启动文件介绍

App.js

App.js 是React Native应用的入口文件，负责初始化应用并渲染根组件。




import React from 'react';


import { SafeAreaView, Text, View } from 'react-native';


import PushNotification from 'react-native-push-notification';


 


const App = () => {


  React.useEffect(() => {


    PushNotification.configure({


      onRegister: function (token) {


        console.log('TOKEN:', token);


      },


      onNotification: function (notification) {


        console.log('NOTIFICATION:', notification);


      },


      permissions: {


        alert: true,


        badge: true,


        sound: true,


      },


      popInitialNotification: true,


      requestPermissions: true,


    });


  }, []);


 


  return (


    <SafeAreaView>


      <View>


        <Text>Welcome to React Native Remote Push</Text>


      </View>


    </SafeAreaView>


  );


};


 


export default App;

3. 项目的配置文件介绍

package.json

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




{


  "name": "react-native-remote-push",


  "version": "1.0.0",


  "private": true,


  "scripts": {


    "android": "react-native run-android",


    "ios": "react-native run-ios",


    "start": "react-native start",


    "test": "jest",


    "lint": "eslint ."


  },


  "dependencies": {


    "react": "17.0.2",


    "react-native": "0.66.0",


    "react-native-push-notification": "^7.3.1"


  },


  "devDependencies": {


    "@babel/core": "^7.12.9",


    "@babel/runtime": "^7.12.5",


    "babel-jest": "^26.6.3",


    "eslint": "^7.14.0",


    "jest": "^26.6.3",


    "metro-react-native-babel-preset": "^0.66.0",


    "react-test-renderer": "17.0.2"


  },


  "jest": {


    "preset": "react-native"


  }


}

android/build.gradle

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




buildscript {


    ext {


        buildToolsVersion = "30.0.2"


        minSdkVersion = 21


        compileSdkVersion = 30


        targetSdkVersion = 30


    }


    repositories {


        google()


        mavenCentral()


    }


    dependencies {


        classpath("com.android.tools.build:gradle:4.2.2")


    }

react-native-remote-pushReact Native Remote Push Notifications Component项目地址:https://gitcode.com/gh_mirrors/re/react-native-remote-push

# 随笔