在线时间:8:00-16:00
迪恩网络APP
随时随地掌握行业动态
扫描二维码
关注迪恩网络微信公众号
开源软件名称:revtel/react-native-nfc-manager开源软件地址:https://github.com/revtel/react-native-nfc-manager开源编程语言:Java 40.6%开源软件介绍:react-native-nfc-managerBring NFC feature to React Native. Inspired by phonegap-nfc and react-native-ble-manager Contributions are welcome! Made with Installjavascript partnpm i --save react-native-nfc-manager native partThis library use native-modules, so you will need to do cd ios && pod install && cd .. For Android, it should be properly auto-linked, so you don't need to do anything. SetupPlease see here Android 12We start to support Android 12 from
The reason for this is because Android puts new limitation on PendingIntent which says
BTW, if you don't care about Android 12 for now, you can use [Demo App] NfcOpenReWriterWe have a full featured NFC utility app using this library available for download. It also open sourced in this repo: React Native NFC ReWriter App LearnWe have published a React Native NFC course with newline.co, check it out!
UsageThe simplest (and most common) use case for this library is to read import React 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() {
async function readNdef() {
try {
// 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
NfcManager.cancelTechnologyRequest();
}
}
return (
<View style={styles.wrapper}>
<TouchableOpacity onPress={readNdef}>
<Text>Scan a Tag</Text>
</TouchableOpacity>
</View>
);
}
const styles = StyleSheet.create({
wrapper: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
},
});
export default App; Pleaes notice when running above codes, iOS and Android has different behaviors:
Regarding the system scannning UI, both platforms should be able to scan your NFC tags succesfully and print out its content. Old Style (registerTagEvent) To Scan NFC TagsThere's an alterntaive style to scan NFC tags through import NfcManager, {NfcTech} from 'react-native-nfc-manager';
// The following function resolves to a NFC Tag object using old event listener approach.
// You can call it like this:
// `const nfcTag = await listenToNfcEventOnce()`
function listenToNfcEventOnce() {
const cleanUp = () => {
NfcManager.setEventListener(NfcEvents.DiscoverTag, null);
NfcManager.setEventListener(NfcEvents.SessionClosed, null);
};
return new Promise((resolve) => {
let tagFound = null;
NfcManager.setEventListener(NfcEvents.DiscoverTag, (tag) => {
tagFound = tag;
resolve(tagFound);
NfcManager.unregisterTagEvent();
});
NfcManager.setEventListener(NfcEvents.SessionClosed, () => {
cleanUp();
if (!tagFound) {
resolve();
}
});
NfcManager.registerTagEvent();
});
} As you can see, the above approach is more verbose and hard-to-read, so we recommend using Advanced Usage ConceptIn higher level, there're 4 steps to use this library:
Advanced Usage Example: NDEF-WritingFor example, here's an example to write NDEF: import NfcManager, {NfcTech, Ndef} from 'react-native-nfc-manager';
async function writeNdef({type, value}) {
let result = false;
try {
// STEP 1
await NfcManager.requestTechnology(NfcTech.Ndef);
const bytes = Ndef.encodeMessage([Ndef.textRecord('Hello NFC')]);
if (bytes) {
await NfcManager.ndefHandler // STEP 2
.writeNdefMessage(bytes); // STEP 3
result = true;
}
} catch (ex) {
console.warn(ex);
} finally {
// STEP 4
NfcManager.cancelTechnologyRequest();
}
return result;
} Advanced Usage Example: Mifare UltralightHere's another example to read a Mifare Ultralight tag: async function readMifare() {
let mifarePages = [];
try {
// STEP 1
let reqMifare = await NfcManager.requestTechnology(
NfcTech.MifareUltralight,
);
const readLength = 60;
const mifarePagesRead = await Promise.all(
[...Array(readLength).keys()].map(async (_, i) => {
const pages = await NfcManager.mifareUltralightHandlerAndroid // STEP 2
.mifareUltralightReadPages(i * 4); // STEP 3
mifarePages.push(pages);
}),
);
} catch (ex) {
console.warn(ex);
} finally {
// STEP 4
NfcManager.cancelTechnologyRequest();
}
return mifarePages;
} To see more examples, please see React Native NFC ReWriter App APIPlease see here FAQPlease see here Expo
After installing this npm package, add the config plugin to the {
"expo": {
"plugins": ["react-native-nfc-manager"]
}
} Next, rebuild your app as described in the "Adding custom native code" guide.
PropsThe plugin provides props for extra customization. Every time you change the props or plugins, you'll need to rebuild (and
Example{
"expo": {
"plugins": [
[
"react-native-nfc-manager",
{
"nfcPermission": "Custom permission message",
"selectIdentifiers": ["A0000002471001"],
"systemCodes": ["8008"]
}
]
]
}
} |
2023-10-27
2022-08-15
2022-08-17
2022-09-23
2022-08-13
请发表评论