react-native android 识别读取NFC卡信息

最近工作中遇到的新需求:android手机通过识别NFC卡唤醒App并读取NFC卡信息,功能实现后特此记录(本文只记录思路,具体实现可下载Demo查看:NFCDemo链接)。

一、 android原生端代码:

1.在AndroidManifest.xml文件中加入下列代码

添加NFC权限


添加下列代码可通过NFC唤醒App


            
        
        
            
            
        
        
            
        

react-native android 识别读取NFC卡信息_第1张图片
2.在MainActivity文件中加入添加onNewIntent方法,识别NFC卡后都会触发这个方法,在这个方法里可以获取到NFC信息,并通过sendEvent发送到RN端(NfcReadHelper和sendEvent为自己封装的方法)

@Override
    public void onNewIntent(Intent intent) {
        super.onNewIntent(intent);
        Log.d(TAG, "onNewIntent " + intent);
        switch (flag) {
            //读取卡唯一Id
            case 0:
                readCardId(intent);
                break;
            //读取卡全部数据
            case 1:
                try {
                    readAllData(intent);
                } catch (UnsupportedEncodingException e) {
                    e.printStackTrace();
                }
                break;
            default:
        }
    }


    /**
     * 读取CardID
     */
    private void readCardId(Intent intent) {
        Log.d(TAG, "onNewIntent " + "22222222222");

        NfcReadHelper helper = new NfcReadHelper(intent);
        helper.getCardId(new NfcReadHelper.NFCCallback() {
            @Override
            public void callBack(Map> data) {

            }

            @Override
            public void callBack(String data) {
                // 将获得的信息发送到RN
                WritableMap event = Arguments.createMap();
                event.putString("cardId", data);
                sendEvent("getCardData", event);
            }

            @Override
            public void error() {
                Log.d(TAG, "onNewIntent " + "读取失败");
                WritableMap event = Arguments.createMap();
                event.putString("errMsg", "读取失败");
                sendEvent("getCardData", event);
            }
        });
    }

    /**
     * 读取Card全部数据
     */
    private void readAllData(Intent intent) throws UnsupportedEncodingException {
        NfcReadHelper helper = new NfcReadHelper(intent);
        helper.getAllData(new NfcReadHelper.NFCCallback() {
            @Override
            public void callBack(Map> data) {
                WritableMap event = Arguments.createMap();
                WritableArray array = Arguments.createArray();
                String text = "";
                for (String key : data.keySet()) {
                    WritableArray array2 = Arguments.createArray();
                    List list = data.get(key);
                    for (int i = 0; i < list.size(); i++) {
                        String str = "第" + key + "扇区" + "第" + i + "块内容:\n" + list.get(i);
                        text += str + "\n";
                        Log.d(TAG, "onNewIntent " + text);

                        array2.pushString(list.get(i).toString());
                    }
                    if (array2.size() != 0) {
                        array.pushArray(array2);
                    }
                }

                event.putArray("cardAllData", array);
                sendEvent("getCardData", event);
            }

            @Override
            public void callBack(String data) {

            }

            @Override
            public void error() {
                Log.d(TAG, "onNewIntent " + "读取失败");
                WritableMap event = Arguments.createMap();
                event.putString("errMsg", "读取失败");
                sendEvent("getCardData", event);
            }
        });
    }

二、 react-native端代码:

在RN端接受监听获得NFC卡信息

componentWillMount() {
    //监听事件名为getCardData的事件
    this.listener = DeviceEventEmitter.addListener('getCardData', (cardMsg) => {
      if (!this.isScanned) {
        this.isScanned = true;
        console.log('================cardMsgcardMsg====================');
        console.log(cardMsg);
        console.log('================cardMsgcardMsg====================');

        this.setState({
          msg: JSON.stringify(cardMsg),
        })

        if (cardMsg.errMsg) {
          Toast.show(cardMsg.errMsg, ToastShowTime);
          this.isScanned = false;
          return;
        }
        if (cardMsg.cardId || (cardMsg.cardAllData && cardMsg.cardAllData.length)) {
          setTimeout(() => {
            this.isScanned = false;
          }, 1000)
        }
      }
    });
  }

  componentWillUnmount() {
    this.listener && this.listener.remove();
  }

react-native android 识别读取NFC卡信息_第2张图片

三、 Demo实现效果:
react-native android 识别读取NFC卡信息_第3张图片

你可能感兴趣的:(android,react-native开发,android,react.js,react,native,nfc)