1.0.6 • Published 2 years ago
react-native-scan-code-cn v1.0.6
react-native-scan-code-cn
Getting started
1. Installation
Using Npm
npm install react-native-scan-code-cn --save
Using Yarn
yarn add react-native-scan-code-cn
Linking (for React Native < 0.60 only)
react-native link react-native-scan-code-cn
2. Configuration
- android
- run
npx jetify
- In
android/app/src/main/AndroidManifest.xml
add:
<uses-permission android:name="android.permission.CAMERA" />
- iOS
- run
npx pod-install
- On iOS, you must update Info.plist with a usage description for camera
<key>NSCameraUsageDescription</key>
<string>Your own description of the purpose</string>
Property
Prop | Type | Default | Note |
---|---|---|---|
codeTypes | Array | all | 设置扫码类型 |
onBarCodeRead | callback() | 扫码结果回调 | |
onLightBright | callback() | 当前后置摄像头光源回调 | |
setFlashlight | function | 设置手电筒开关 |
Examples
Make sure permissions are turned on before using
import React, { useState, useEffect } from 'react'
import { View, Platform, Animated, InteractionManager, Easing, TouchableOpacity, Text, StyleSheet, Dimensions } from 'react-native'
import { RNScanCode } from 'react-native-scan-code-cn'
const windowWidth = Dimensions.get('window').width
const AMBIENT_BRIGHTNESS_DARK = Platform.OS === 'ios' ? 0 : 60
// 是否打开闪光灯
let onFlash = false
let animation = new Animated.Value(0)
const ScanQrcodeScreen = ({ navigation, onclose }) => {
// 是否显示手电筒按钮
const [isFlashlight, setIsFlashlight] = useState(false)
// 显示手电筒的什么按钮
const [flashlightType, setFlashlightType] = useState('open')
useEffect(() => {
InteractionManager.runAfterInteractions(() => {
Animated.loop(
Animated.timing(animation, {
toValue: 275,
duration: 1500,
easing: Easing.linear,
useNativeDriver: true
})
).start()
})
}, [])
function barcodeReceived(e) {
console.log('扫码结果 = ', e);
}
// 手电筒逻辑
function FlashView() {
return flashlightType === 'open' ? (
<TouchableOpacity
style={{ width: 100, height: 100, backgroundColor: 'green' }}
onPress={() => {
RNScanCode.setFlashlight(true)
onFlash = true
setFlashlightType('close')
}}
>
<Text>open</Text>
</TouchableOpacity>
) : (
<TouchableOpacity
style={{ width: 100, height: 100, backgroundColor: 'yellow' }}
onPress={() => {
RNScanCode.setFlashlight(false)
onFlash = false
setFlashlightType('open')
}}
>
<Text>close</Text>
</TouchableOpacity>
)
}
return (
<View style={{ flex: 1 }}>
<RNScanCode
style={style.preview}
codeTypes={[RNScanCode.Constants.CodeType.qr]}
onBarCodeRead={barcodeReceived}
onLightBright={(data: any) => {
console.log('light = ', data.light)
if (!onFlash) {
if (Number(data.light) < AMBIENT_BRIGHTNESS_DARK) {
setIsFlashlight(true)
} else {
setIsFlashlight(false)
}
}
}}
>
<View style={style.scanView} pointerEvents="none">
<View style={style.scanAnimateView}>
<Animated.View
style={{
transform: [
{
translateY: animation
}
],
backgroundColor: 'red',
width: 100,
height: 5,
}}
/>
</View>
</View>
{isFlashlight && <FlashView />}
</RNScanCode>
</View>
)
}
const style = StyleSheet.create({
preview: {
flex: 1,
flexDirection: 'column',
alignItems: 'center'
},
scanView: {
width: windowWidth,
height: 281,
marginTop: 61,
alignItems: 'center'
},
scanAnimateView: {
width: windowWidth,
height: 281,
position: 'absolute',
top: 0,
left: 0,
alignItems: 'center',
},
})
https://github.com/JedShiMing/scan-code-demo
Troubleshooting
1. ios can't zoom
Add to the component
pointerEvents="none"