0.2.2 • Published 2 years ago
react-native-multiple-qrcode-scanner v0.2.2
react-native-multiple-qrcode-scanner
multiple qrcode scanner for react native
Installation
npm install react-native-multiple-qrcode-scanner
Usage
import * as React from 'react';
import { StyleSheet, View } from 'react-native';
import MultipleQRCodeScannerView, {
requestCameraPermission,
} from 'react-native-multiple-qrcode-scanner';
import { useEffect } from 'react';
export default function App() {
useEffect(() => {
requestCameraPermission();
}, []);
return (
<View style={styles.container}>
<MultipleQRCodeScannerView
onQRCodeTouch={(code) => {
console.warn(code);
}}
colorMap={{
'^30.*': '#00FF00',
}}
labeledOnlyPatternMatched={false}
labelMap={{
'^.*$': 'hello',
}}
labelColorMap={{
'30.*$': '#000000',
}}
labelDirection="bottom"
style={styles.box}
/>
</View>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
alignItems: 'center',
justifyContent: 'center',
},
box: {
width: '100%',
height: '100%',
},
});
props
type MultipleQRCodeScannerViewProps = {
style?: ViewStyle; // CSS
onQRCodeRead?: (code: string) => void; // QRコードを検知時に実行
onQRCodeTouch?: (code: string) => void; // QRコードの枠をタッチした時に実行
colorMap?: { [pattern: string]: string }; // 枠の色を決める正規表現をキーとしたマップ。マッチした正規表現に対応した色になる。何にもマッチしないと赤になる。
colorMapForAlreadyRead?: { [pattern: string]: string }; // 一度表示した正規表現が画面外に出たあと戻ってきたときはこちらを使う。
labelMap?: { [pattern: string]: string }; // QRコードにラベルをつけるための正規表現をキーとしたマップ
labeledOnlyPatternMatched?: boolean; // defaultで true。これがtrueなら、colorMapやcolorMapForAlreadyReadがマッチしたQRコードに同じパターンのラベルをつけるだけ。これがfalseなら、colorMapやcolorMapForAlreadyReadとは別に検索される
labelColor?: string; // これを指定するとラベルの色は固定される。
labelColorMap?: { [pattern: string]: string }; // ラベルの色を決める正規表現をキーとしたマップ。これもlabelColorも指定しないと枠と同じ色になる。
labelDirection?: LabelDirection; // "right"か"bottom"かのどちらか。ラベルを右に出すか下に出すか
labelFontSize?: number; // ラベルのフォントのポイント数
alpha?: number; // 枠とラベルの透明度
};
Contributing
See the contributing guide to learn how to contribute to the repository and the development workflow.
License
MIT