React Native推送通知：完整的操作指南

git clone https://github.com/codezri/Done-With-It-App.git

yarn install 
yarn start 

import * as Notifications from 'expo-notifications';

async function registerForPushNotificationsAsync() {
    let token;

    const { status: existingStatus } = await Notifications.getPermissionsAsync();
    let finalStatus = existingStatus;

    if (existingStatus !== 'granted') {
        const { status } = await Notifications.requestPermissionsAsync();
        finalStatus = status;
    }
    if (finalStatus !== 'granted') {
        alert('Failed to get push token for push notification!');
        return;
    }
    token = (await Notifications.getExpoPushTokenAsync()).data;
    console.log(token);

    return token;
}

const AppNavigator = () => {
    useEffect(() => {
        registerForPushNotificationsAsync();
    }, []);

Notifications.setNotificationHandler({
  handleNotification: async () => ({
    shouldShowAlert: true
  }),
});

const AppNavigator = () => {
// ----
// ----

import client from './client';
const register = (pushToken) => client.post('/expoPushTokens', { token: pushToken });
export default {
    register,
}

const AppNavigator = () => {

    useEffect(() => {
        registerForPushNotificationsAsync()
            .then(token => expoPushTokensApi.register(token));
    }, []);

# # cd into the newly cloned Git repository.
git clone https://github.com/iamfortune/DoneWithIt-Backend.git

# Next we install the npm packages using this command:
npm install 

npm start 

npm i expo-server-sdk #install the package

//file name: utilities/pushNotifications.js
const { Expo } = require("expo-server-sdk");

const sendPushNotification = async (targetExpoPushToken, message) => {
  const expo = new Expo();
  const chunks = expo.chunkPushNotifications([
    { to: targetExpoPushToken, sound: "default", body: message }
  ]);

const { Expo } = require('expo-server-sdk');
const sendPushNotification = require('../utilities/pushNotifications');
// ----
// ----
if (Expo.isExpoPushToken(expoPushToken)) {
  await sendPushNotification(expoPushToken, message);
}
// ----

const AppNavigator = () => {

    const responseListener = useRef();

    useEffect(() => {
        registerForPushNotificationsAsync()
            .then(token => expoPushTokensApi.register(token));

        // Works when app is foregrounded, backgrounded, or killed
        responseListener.current = Notifications.addNotificationResponseReceivedListener(response => {
            console.log('--- notification tapped ---');
            console.log(response);
            console.log('------');
        });

        // Unsubscribe from events
        return () => {
            Notifications.removeNotificationSubscription(responseListener.current);
        };
    }, []);
// ----
// ----

// ----
// ----

Notifications.setNotificationHandler({
  handleNotification: async () => ({
    shouldShowAlert: true
  }),
});

const AppNavigator = () => {

    const notificationListener = useRef();

    useEffect(() => {
        registerForPushNotificationsAsync()
            .then(token => expoPushTokensApi.register(token));

        notificationListener.current = Notifications.addNotificationReceivedListener(notification => {
            console.log('--- notification received ---');
            console.log(notification);
            console.log('------');
        });

        // Unsubscribe from events
        return () => {
            Notifications.removeNotificationSubscription(notificationListener.current);
        };
    }, []);
// ----
// ----

import { StyleSheet, Text, View, Button } from "react-native";
import * as Notifications from "expo-notifications";

{
  /*Configure our notification settings:*/
}

Notifications.setNotificationHandler({
  handleNotification: async () => ({
    shouldShowAlert: true,
    shouldPlaySound: true,
    shouldSetBadge: true,
  }),
});

const generateNotification = async () => {
  //show the notification to the user
  Notifications.scheduleNotificationAsync({
    //set the content of the notification
    content: {
      title: "Demo title",
      body: "Demo body",
    },
    trigger: null,
  });
};
return (
  <View style={styles.container}>
    {/*When clicked, execute the generateNotification function*/}
    <Button
      title="Generate notification"
      onPress={() => generateNotification()}
    />
  </View>
);

npx react-native@latest init notifeeLearn
npm install notifee

import notifee from "@notifee/react-native";

function App(): React.JSX.Element {
  // 定义我们的处理函数：
  async function onDisplayNotification() {

    // 请求权限（iOS 需要）
    await notifee.requestPermission();

    // 创建一个频道（Android 需要）
    const channelId = await notifee.createChannel({
      id: "default",
      name: "默认频道",
    });

    // 显示一个通知
    await notifee.displayNotification({
      title: "通知标题",
      body: "通知的主体内容",
      android: {
        channelId,
        // 如果你想要通知被按下时打开应用，需要 pressAction
        pressAction: {
          id: "default",
        },
      },
    });
  }
  return (
    <SafeAreaView style={styles.main}>
    {/*创建一个按钮，点击时，应向用户显示一个通知*/}
      <Button
        title="显示通知"
        onPress={() => onDisplayNotification()}
      />
    </SafeAreaView>
  );
}

// 文件名：index.js
import notifee, {EventType} from '@notifee/react-native';

// 这个处理器将监听后台事件：
notifee.onBackgroundEvent(async ({type, detail}) => {
  const {notification, pressAction} = detail;
  // 记录通知数据
  console.log('类型 ', type);
  console.log('通知数据 ', detail);

  // 检查用户是否已按下通知
  if (type === EventType.PRESS && pressAction.id === 'default') {
    // 进行一些处理..
    console.log('默认按钮被按下');
    // 在事件被注册后移除通知。
    await notifee.cancelNotification(notification.id);
  }
});

// 文件名：App.tsx
// 为简洁起见，移除了不必要的代码
await notifee.displayNotification({
  //..后续代码..
  android: {
    //后续代码..
    pressAction: {
      /*更多代码*/
    },
    //在此配置动作：
    actions: [{ title: "点击我", pressAction: { id: "click-me" } }],
  },
});

// 文件名：App.tsx
useEffect(() => {
  // 注册我们的前台事件：
  notifee.onForegroundEvent(({ type, detail }) => {
    // 如果通知上的按钮被点击：
    if (type === EventType.ACTION_PRESS && detail?.pressAction?.id) {
      console.log("detail", detail);
      // 打印出通知的 id：
      console.log(
        "用户点击了一个带有 id 的动作：",
        detail.pressAction.id,
      );
    }
  });
}, []);