React Native NFC Manager 在取消太快后无法在 IOS 上工作

Question

我正在尝试使用 React Native NFC Manager 创建一个基本的 NFC 阅读应用程序，但我有一个问题： 当我单击 TouchableOpacity，然后关闭弹出窗口（使用取消按钮）并再次快速打开它时，什么也没有显示...代码中是否有我忘记的内容？没有显示错误...可能与 nfc 过程花费太长时间有关...这是我写的：

import React, {useState} from 'react';
import {View, Text, TouchableOpacity, StyleSheet} from 'react-native';
import NfcManager, {NfcTech} from 'react-native-nfc-manager';

// Pre-step, call this before any NFC operations
NfcManager.start();

function App() {
  const [loaded, setLoaded] = useState(true);
  async function readNdef() {
    try {
      setLoaded(false);
      // register for the NFC tag with NDEF in it
      await NfcManager.requestTechnology(NfcTech.Ndef);
      // the resolved tag object will contain `ndefMessage` property
      const tag = await NfcManager.getTag();
      console.warn('Tag found', tag);
    } catch (ex) {
      console.warn('Oops!', ex);
    } finally {
      // stop the nfc scanning
      try {
        await NfcManager.cancelTechnologyRequest();
      } catch (ex) {
        console.warn('Error while canceling technology request', ex);
      } finally {
        setLoaded(true);
      }
    }
  }

  return (
    <View style={styles.wrapper}>
      {loaded && (
        <TouchableOpacity onPress={readNdef}>
          <Text style={{color: 'white'}}>Scan a Tag</Text>
        </TouchableOpacity>
      )}
    </View>
  );
}

const styles = StyleSheet.create({
  wrapper: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
});

export default App; 

Answer 1

NFC 管理器在组件安装时启动，并在使用 useEffect 挂钩卸载时停止。此外，它还会在启动 NFC 操作之前验证弹出窗口是否已加载，以防止用户快速打开和关闭窗口时出现问题。

import React, { useState, useEffect } from 'react';
import { View, Text, TouchableOpacity, StyleSheet } from 'react-native';
import NfcManager, { NfcTech } from 'react-native-nfc-manager';

function App() {
  const [loaded, setLoaded] = useState(true);

  useEffect(() => {
    NfcManager.start();
    return () => {
      NfcManager.stop();
    };
  }, []);

  async function readNdef() 
  {
    try {
      setLoaded(false);
      if (!loaded) 
      {
        return;
      }

      await NfcManager.requestTechnology(NfcTech.Ndef);

      const tag = await NfcManager.getTag();

    } 
    catch (ex) 
    {
      console.warn('Oops!', ex);
    } 
    finally
    {
      try 
      {
        await NfcManager.cancelTechnologyRequest();
      } 
      catch (ex) 
      {
        console.warn('Error while canceling technology request', ex);
      } 
      finally 
      {
        if (!loaded) 
        {
          setLoaded(true);
        }
      }
    }
  }

  return (
    <View style={styles.wrapper}>
      {
        loaded && (
          <TouchableOpacity onPress={readNdef}>
            <Text style={{ color: 'white' }}>Scan a Tag</Text>
          </TouchableOpacity>
        )
      }
    </View>
  );
}

const styles = StyleSheet.create({
  wrapper: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
});

export default App;