标签: react-native-firebase

我读

• 如何在 Firebase 中的后台应用程序处理通知
• 收到 Firebase 通知时打开应用程序 (FCM)

但这些不是react-native-firebase的解决方案。

我正在react-native-firebase用来处理通知。在前台，一切正常。我坚持使用后台状态。

我正在做一个聊天项目并制作一对一通话功能。当客户有电话时，我会向他们推送数据通知。在 iOS 中，我在客户端收到通知时使用了 CallKit，它运行良好。但是在 Android 中我有一个问题：我可以显示 ConnectionService UI 进行调用，但无法连接到我的 Web 套接字服务器，因为它在 Headless JS 服务上运行。所以我尝试自动打开应用程序。我想将呼叫屏幕显示为 Skype，并接受/拒绝呼叫。（Skype 可以在我有电话时启动该应用程序）

总结，成功步骤：

• 在前台状态接收呼叫通知并显示呼叫屏幕。
• 在后台/关闭状态下接收呼叫通知并在 iOS 上显示呼叫屏幕。
• 在 Android 上在后台/关闭状态下接收呼叫通知。

卡在这里：

• 在后台显示呼叫屏幕/在 Android 上关闭？？？

TL;DR - 如何从 Headless JS 服务启动/运行/打开 Android 应用程序？

我深入研究 react-native-firebase，它捕获通知onMessageReceived并将通知消息发送到 Headless JS 服务。

// If the app is in the background we send it to the Headless JS Service Intent headlessIntent = new Intent( this.getApplicationContext(), RNFirebaseBackgroundMessagingService.class …

我的 AndroidManifest 是

在我写的索引中 AppRegistry.registerHeadlessTask('RNFirebaseBackgroundMessage', () => firebaseBackgroundMessage);

这firebaseBackgroundMessage是一个功能如下

export async function firebaseBackgroundMessage(message: RemoteMessage) { 
let notif=message['data']; console.log(notif); return Promise.resolve();}

我在后台和前台状态收到 fcm 消息，但是

在关闭状态没有收到任何 fcm 消息，在控制台日志中我有这个错误

 No task registered for key RNFirebaseBackgroundMessage

任何解决方案？非常感谢您的帮助...

我已成功检测到使用 react-native-camera 拍摄的图像上的文本元素。在vision().textRecognizerProcessImage(photoUri)成功返回检测到的文本。

// take the photo from the camera
  takePicture = async () => {
    try {
      const options = {
        quality: 0.8,
        base64: true,
        skipProcessing: true,
      };
      const picture = await this.camera.takePictureAsync(options);
      console.log('picture', picture);
      const {uri, width, height} = picture;
      // saving the pixel size of the selected image too 
      // for boxes position/size calculation
      this.setState({
        photoUri: uri,
        imgPixelHeight: height,
        imgPixelWidth: width,
      });
    } catch (e) {
      console.warn(e);
    }
  };

// processing the image to detect …

Firestore 中的乐观更新似乎没有预期的那么快。我看到更新时间至少为 200 毫秒，在我写入 Firestore 的时间和触发快照侦听器的时间之间。我正在使用 React Native Firebase 库，但我认为问题不太可能源于此。该库只是本机 SDK 的一个薄包装层。我启用了离线持久性，但无论是否有互联网连接，行为都是相同的。

下面的代码片段说明了这个问题：

class App extends React.Component{
  componentDidMount(){
    db.collection("cities").onSnapshot(function(qsnap) {
          this.setState({cities: qsnap.docs.map(s => s.data())})
      });
  }

  addCity(){
    db.collection("cities").add({
      name: Math.random(),
      country: "Japan"
    })
  }

 render(){

  //After clicking add city, the new render doesn't happen until
  //after a minimum time of 200 ms :(

  <View>
    <TouchableOpacity onPress={this.addCity}>Add city</TouchableOpacity>
    {this.state.cities.map(c => <Text>{c.name}</Text>)}
  </View>
  }
}

我有什么做错的地方或者可以采取不同的做法吗？我喜欢从数据存储订阅快照并直接从中渲染 UI，然后直接写入数据存储并通过乐观传播让我的 UI 立即更新的模式。

我安装了 @react-native-firebase v6，它按预期工作，但是当我尝试运行单元测试时，出现以下错误：

Jest encountered an unexpected token

Details:

/node_modules/@react-native-firebase/database/lib/index.js:18
import { isBoolean, isNumber, isString } from '@react-native-firebase/app/lib/common';
       ^

SyntaxError: Unexpected token {

我尝试将 @react-native-firebase/database 和 @react-native-firebase/app 添加到 jest config TransformIgnorePatterns 并收到以下错误：

Test suite failed to run

Invariant Violation: Native module cannot be null.

  at invariant (node_modules/invariant/invariant.js:40:15)
  at RNFBNativeEventEmitter.NativeEventEmitter (node_modules/react-native/Libraries/EventEmitter/NativeEventEmitter.js:36:7)
  at new RNFBNativeEventEmitter (node_modules/@react-native-firebase/app/lib/internal/RNFBNativeEventEmitter.js:24:5)
  at Object.<anonymous> (node_modules/@react-native-firebase/app/lib/internal/RNFBNativeEventEmitter.js:48:16)
  at Object.<anonymous> (node_modules/@react-native-firebase/app/lib/internal/registry/nativeModule.js:21:1)

我还尝试用 Jest 模拟模块，如下所示：

import * as FBCommon from '@react-native-firebase/app/lib/common'

jest.mock(FBCommon, () => {
return () => ({
    isBoolean: jest.fn(),
    isNumber: …

Firestore 的一个主要卖点是能够将其用作在线/离线事实来源。我现在正在以这种方式使用它：直接在操作上更新 Firestore 文档，然后侦听 Firestore DB 更改并将其映射回本地状态。然而，依靠这种延迟补偿和映射回本地状态不足以实现快速更新（即使文档大小很小，也可以点击、切换）。例如，切换将“抖动”，因为 RN 切换可能会在点击时移动，并且本地状态在返回之前不会更新，请参阅视频示例。在 Android 上情况似乎更糟，而且问题并不严格限于基本切换。

1. 文档大小或查询结果大小对延迟补偿的影响更大吗？目前我们的文档大小非常小，最坏情况下大约有 1000 个查询结果集。我们可以将文档放大 1000 倍 (100kb)，并拥有大小为 1 的查询结果集。更新：此处的测试似乎不一致，延迟补偿在这两种情况下都不理想

2. 以下哪些其他因素可能会影响延迟补偿？

   • 使用带有自定义索引的查询。注意：我们当前没有从缓存中读取，我们使用的是 JS SDK
   • 多次写入。对同一个文档进行多次写入会使情况变得更糟（4 次快速写入与 2 次快速写入）。更新：不清楚这有很大的不同。
   • 使用原生与 JS 模块。我们目前正在将 Firestore Web SDK 与 Expo 应用结合使用。更新：通过React-Native Firestore切换到本机模块没有明显的性能提升。

3. 人们是否经常使用 React Native / Firestore 应用程序构建本地数据填充层 / 本地应用程序状态来帮助提高本地性能速度？有没有推荐的库？

在应用程序加载时，安装侦听器，并将结果导出到上下文以通过应用程序使用

const [user, setUser] = useState();

firebase.firestore().collection(`users/${user.uid}`).onSnapshot(qs => setUser(oldState => {
    const newState = {};
    qs.docChanges().forEach(change => {
      if (change.type === "added" || change.type === "modified") …

我正在使用react-native-firebase和react-native-document-picker，并且我正在尝试遵循面部检测教程。

尽管通过PermissionsAndroid具有读取访问权限，但目前仍出现以下错误：

Permission Denial: reading com.android.provides.media.MediaDocumentsProvider uri [uri] from pid=4746, uid=10135 requires that you obtain access using ACTION_OPEN_DOCUMENT or related APIs

我可以在屏幕上显示用户选择的图像，但react-native-firebase功能似乎无法获得许可。错误发生在这个调用：const faces = await vision().faceDetectorProcessImage(localPath);。

关于如何授予人脸检测功能访问权限或我做错了什么有什么建议吗？

我的 AndroidManifest.xml 文件包含以下内容：

<uses-permission android:name="android.permission.INTERNET" />
<uses-permission android:name="android.permission.CAMERA" />
<uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE" />
<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />

以下是该组件中的所有代码以供参考：

import React, {useState} from 'react';
import { Button, Text, Image, PermissionsAndroid } from 'react-native';
import vision, { VisionFaceContourType } from '@react-native-firebase/ml-vision';
import DocumentPicker from 'react-native-document-picker';



async function processFaces(localPath) …

我正在使用@react-native-firebase来处理推送通知。问题是当应用程序在后台时它正在工作。如果应用程序处于前台或打开状态，则推送通知不起作用。另外，我正在使用notifee创建自定义通知。它也不起作用。

这是版本详细信息。

"@react-native-firebase/app": "^8.3.1",
"@react-native-firebase/messaging": "^7.7.2",
"@notifee/react-native": "^0.12.3",

实施代码

componentDidMount() {
        console.log('componentDidMount App ');

        // AppState.addEventListener('change', this._handleAppStateChange);

        messaging()
            .getInitialNotification()
            .then(remoteMessage => {
                console.log('Notification caused app to open from quit state:');
                if (remoteMessage) {
                    console.log(remoteMessage.notification);
                }
            });

        const unsubscribe = messaging().onMessage(async remoteMessage => {
            console.log('A new FCM message arrived!');
            console.log(remoteMessage);
        });

        // Register background handler
        messaging().setBackgroundMessageHandler(async remoteMessage => {
            console.log('Message handled in the background!');
            console.log(remoteMessage);

        });

        messaging().onNotificationOpenedApp(remoteMessage => {
            console.log('Notification caused app to open from background state:'); …

我已在 Firebase 上启用 Google SignIn，并且还添加了 SHA-1 密钥。我的应用程序编译得很好，但是当我按下登录按钮并选择 Google 帐户进行登录时，我得到了Possible Unhandled Promise Rejection (id: 0): Error: DEVELOPER_ERROR
当我尝试使用匿名登录时我没有收到任何错误。我使用的是 Android，并且所有模块都有最新版本。这是完整的错误代码：

[Fri Oct 23 2020 18:08:26.174]  WARN     Possible Unhandled Promise Rejection (id: 0):
Error: DEVELOPER_ERROR
promiseMethodWrapper@http://localhost:8081/index.bundle?platform=android&dev=true&minify=false:2242:45
signIn$@http://localhost:8081/index.bundle?platform=android&dev=true&minify=false:102709:72
tryCatch@http://localhost:8081/index.bundle?platform=android&dev=true&minify=false:24976:23
invoke@http://localhost:8081/index.bundle?platform=android&dev=true&minify=false:25149:32
tryCatch@http://localhost:8081/index.bundle?platform=android&dev=true&minify=false:24976:23
invoke@http://localhost:8081/index.bundle?platform=android&dev=true&minify=false:25049:30
http://localhost:8081/index.bundle?platform=android&dev=true&minify=false:25059:21
tryCallOne@http://localhost:8081/index.bundle?platform=android&dev=true&minify=false:27056:16
http://localhost:8081/index.bundle?platform=android&dev=true&minify=false:27157:27
_callTimer@http://localhost:8081/index.bundle?platform=android&dev=true&minify=false:30596:17
_callImmediatesPass@http://localhost:8081/index.bundle?platform=android&dev=true&minify=false:30635:17
callImmediates@http://localhost:8081/index.bundle?platform=android&dev=true&minify=false:30852:33
__callImmediates@http://localhost:8081/index.bundle?platform=android&dev=true&minify=false:2736:35
http://localhost:8081/index.bundle?platform=android&dev=true&minify=false:2522:34
__guard@http://localhost:8081/index.bundle?platform=android&dev=true&minify=false:2719:15
flushedQueue@http://localhost:8081/index.bundle?platform=android&dev=true&minify=false:2521:21
flushedQueue@[native code]
callFunctionReturnFlushedQueue@[native code]

这是我的App.js：

import React, {useState, useEffect} from 'react';
import {View, Text, Button} from 'react-native';

import auth from '@react-native-firebase/auth';
import firebase from '@react-native-firebase/app';
import {GoogleSignin} from '@react-native-community/google-signin'; …

通知人通知图标在通知人显示通知中不起作用

notifee.displayNotification({
        title: remoteMessage.notification.title,
        body: remoteMessage.notification.body,
        android: {
          channelId: 'android_id',
        },
      });

我已经使用了很多东西，例如小图标，大图标和其他方式，但通知图标没有显示，它只是显示默认图像。

我还检查了 AndroidManifest 元数据标签，它们也不起作用。