ChargEco/Strides-APP/app/pages/home/Notify.js

import React, { Component } from 'react';
import { View, Text, StyleSheet, Clipboard, Platform } from 'react-native';
import Button from '../../components/Button';
import PushNotification from "react-native-push-notification";
import Dialog from '../../components/Dialog';
import apiUpload from '../../api/apiUpload';
import app from '../../../app.json'

export default class Notify extends Component {
  constructor(props) {
    super(props);
    this.state = {
      permission: false,
      notifyToken: 'none'
    };
  }

  componentDidMount() {
    //this.requestUserPermission()
    if (global.notifyToken.token) {
      this.setState({
        notifyToken: global.notifyToken.token
      })
    }
  }

  async requestUserPermission() {
    const authStatus = await messaging().requestPermission();
    const enabled =
      authStatus === messaging.AuthorizationStatus.AUTHORIZED ||
      authStatus === messaging.AuthorizationStatus.PROVISIONAL;
    this.setState({
      permission: enabled
    })
    if (enabled) {
      console.log('Authorization status:', authStatus);
    }
    this.getToken()
  }

  getToken() {
    messaging().getToken().then(token => {
      if (token) {
        this.setState({
          notifyToken: token
        })
        console.log("token", token);
      }
    }).catch(err => {
      console.info('Token Error', err)
    });
  }

  localNotification() {
    PushNotification.localNotification({
      /* Android Only Properties */
      channelId: "10186", // (required) channelId, if the channel doesn't exist, notification will not trigger.
      showWhen: true, // (optional) default: true
      autoCancel: true, // (optional) default: true
      title: app.displayName, // (optional) default: "message" prop
      message: "This is a local test message", // (optional) default: none
      vibrate: true, // (optional) 振动开关default: true
      vibration: 300, // 振动长度（毫秒），如果vibrate=false，则忽略, default: 1000
      invokeApp: true, // 此选项允许单击操作将应用程序带回前台或留在后台, default: true
      smallIcon: "ic_notification",
      /* iOS only properties */
      //subtitle: "My Notification Subtitle", // (optional) smaller title below notification title
    });
  }

  remoteNotification() {
    Dialog.showProgressDialog();
    apiUpload.testNotification().then(res => {
      Dialog.dismissLoading();
      toastShort("Success");
    }).catch(err => {
      Dialog.dismissLoading();
      toastShort(err);
    })
  }

  copyToken() {
    Clipboard.setString(this.state.notifyToken);
    toastShort('已复制到剪贴板')
  }

  render() {
    return (
      <View style={styles.container}>
        <Text style={styles.text}>注册的Token：{this.state.notifyToken}</Text>
        <View style={styles.text}>
          <Button
            text='复制Token'
            elevation={2}
            onClick={() => this.copyToken()}
            />
        </View>
        <View style={styles.text}>
          <Button
            text='发送本地通知'
            elevation={2}
            onClick={() => this.localNotification()}
            />
        </View>
        <View style={styles.text}>
          <Button
            text='发送远程通知'
            elevation={2}
            onClick={() => this.remoteNotification()}
            />
        </View>
        <View style={[ui.flex1, ui.flexcc]}>
          <Text style={styles.os}>{Platform.OS}</Text>
        </View>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    ...$padding(8,16)
  },
  text: {
    paddingBottom: 12
  },
  os: {
    color: '#999'
  }
})