首页 > 解决方案 > 如何在 React Native 中从 NFC 卡读取数据?

问题描述

所以我在我的项目中使用 react-native-nfc-manager 需要扫描来自 nfc 卡的数据,但它只是在扫描时一直崩溃。它正在正确扫描另一部手机的数据,但在扫描卡时不断崩溃。

我用过 react-native-nfc-manager 包 https://github.com/whitedogg13/react-native-nfc-manager

import React, { Component } from "react";
import { ScrollView, Alert, View, Text, StyleSheet } from "react-native";
import QRCode from "react-native-qrcode";
import { Button } from "native-base";
import { startNFC } from "./NFCHelper";
export default class POS_2MENU extends Component {
  static navigationOptions = ({ navigation }) => ({ header: null });

  constructor(props) {
    super(props);
    const { navigation } = this.props;
    this.state = { tagValue: null, showProgress: false };
    global.payer = navigation.getParam("wallet");
    global.amount = navigation.getParam("amount");
    global.token = navigation.getParam("token");
    global.card = navigation.getParam("card");
  }

  componentWillMount() {
    startNFC(this.handleNFCTagReading);
  }
  componentWillUnmount() {
    // stopNFC();
  }

  handleNFCTagReading = nfcResult => {
    if (nfcResult.Error) {
      this.setState({ tagValue: nfcResult.Error.Message });
    } else {
      alert("nfc data show here");
    }
  };

  render() {
    return (
      <ScrollView style={styles.homeView}>
        {this.state.tagValue ? (
          <Text style={styles.tagValue}>{this.state.tagValue}</Text>
        ) : null}

        <View style={styles.container}>
          <Button
            style={styles.image1}
            activeOpacity={0.5}
          >
            <Text style={{ color: "#fff", fontSize: 20, marginLeft: "18%" }}>
              Tap Card Here
            </Text>
          </Button>
          <QRCode
            value={global.payer + "," + global.amount}
            size={200}
            bgColor="#000"
            fgColor="#fff"
          />
        </View>
      </ScrollView>
    );
  }
}

const styles = StyleSheet.create({
  homeView: {
    marginTop: 20,
    marginBottom: 40
  },
  container: {
    marginTop: 40,
    marginLeft: "25%"
  },
  image1: {
    backgroundColor: "#008CBA",
    width: 200,
    height: 200,
    marginBottom: 40
  },
  tagValue: {
    fontWeight: "bold",
    fontSize: 16,
    marginTop: 40,
    paddingLeft: 40,
    paddingRight: 40,
    textAlign: "center"
  }
});

标签: react-nativenfc

解决方案


推荐阅读